Ranjan m Ranjan m - 7 months ago 15
Javascript Question

I tried to implement in my site animate.css, it is only working for ready(load) Event of jquerry, it is not working for other mouse events?

$('#div').ready(function () {
$('#div').addClass('animated bounceInLeft');
});


It is working fine for the above code.

But it is not working for the below code.

$('#TextBox1').on('click', function () {
$('#TextBox1').addClass('animated shake');
});


How to resolve this??

This is my complete code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/motion-ui.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="script/motion-ui-starter/css/animate.css" rel="stylesheet" />


<link href="script/motion-ui-starter/css/motion-ui.css" rel="stylesheet" />

<link href="script/motion-ui-starter/css/foundation.css" rel="stylesheet" />
<link href="script/motion-ui-starter/css/style.css" rel="stylesheet" />
<script src="script/motion-ui-starter/js/vendor/modernizr.js"></script>

<style>
.animated {
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 1;
}

.flash {
animation-delay: 3s;
}

.auto-style1 {
width: 100%;
border: 2px solid #000066;
background-color: #cccccc;
}

.auto-style4 {
width: 513px;
height: 44px;
}

.auto-style7 {
height: 52px;
text-align: center;
color: #FFFFFF;
}

.auto-style9 {
height: 44px;
width: 1403px;
}

.auto-style10 {
height: 53px;
}
</style>
<script src="script/motion-ui-starter/js/script.js"></script>
<script src="script/motion-ui-starter/js/foundation.min.js"></script>
<script src="script/motion-ui-starter/js/vendor/jquery.js"></script>
<script src="script/motion-ui-starter/js/vendor/motion-ui.js"></script>

<script src="script/motion-ui-starter/css/Java.min.js"></script>
<script>
$('#div').ready(function () {
$('#div').addClass('animated bounceInLeft');

});

$('#TextBox1').on('click', function () {
$('#TextBox1').addClass('animated shake');

});
</script>





<form id="form1" runat="server">
<div style="position: absolute; top: 63px; left: 2px; width: 280px; height: 203px; bottom: 513px;" id="div">
<table class="auto-style1">
<tr>
<td class="auto-style7" colspan="2"><strong>Login Here</strong></td>
</tr>
<tr>
<td class="auto-style4">User ID</td>
<td class="auto-style9">
<asp:TextBox ID="TextBox1" runat="server" Height="43px" Style="margin-left: 15px" Width="194px" CssClass="animated flash"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">Password</td>
<td class="auto-style9">
<asp:TextBox ID="TextBox2" runat="server" Height="44px" Style="margin-left: 14px" Width="196px" CssClass="animated flash"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style10" colspan="2">
<asp:Button ID="Button2" runat="server" Height="36px" Text="LOGIN" Width="94px" />
&nbsp;</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Answer

It should be

<script>
    $(document).ready(function () {
        $('#div').addClass('animated bounceInLeft');
        $('#TextBox1').on('click', function () {
            $('#TextBox1').addClass('animated shake');
        });
    });
</script>

The event binding should work correctly (with a guarantee) once the DOM is ready.

Comments