How to add a fade-in effect in jQuery text - javascript

How to add a fade-in effect when the data is returned to the #results div?
$('#results').html(data);
I tried
$('#results').html(data).fadeIn('slow');
but it doesn't seem to work
My code
submitHandler: function(form) {
// do other stuff for a valid form
$.post('mailme.php', $("#myform").serialize(), function(data) {
$('#results').html(data).fadeIn('slow');
});
}

You gotta hide the div first.
$('#results').hide().html(data).fadeIn('slow');

This might just do the trick.
$('#results').css('display', 'none').html(data).fadeIn('slow');

you have to hide element firstly when you are working with "fadeIn".
here is a example, I believe you will understand after trying and editing that:
<img style="display: none;" id="google" src="http://www.google.com.tr/images/srpr/logo3w.png" alt="" />
<script>
$(document).ready(function() {
$('#google').fadeIn(1200,function(){});
});
</script>

Related

Hide when no longer hovering using jQuery

I want the div #reloadWarningBackground to show ONLY when hovering over the button #reloadButton.
Here is my code:
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
});
Use mouseout like following.
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
}).mouseout(function() {
$('#reloadWarningBackground').hide();
})
UPDATE
It is better to use mouseenter since mouseover will be executed repeatedly.
$('#reloadButton').mouseenter(function () {
$('#reloadWarningBackground').show();
}).mouseleave(function () {
$('#reloadWarningBackground').hide();
})
The simplest and best way to address this problem is using toggle().
//html
<button id="reloadButton">
Hover me
</button>
<div id="reloadWarningBackground" style="display:none;">
<p>
Hello this is me
</p>
</div>
//Javascript
$('#reloadButton').hover(function() {
$('#reloadWarningBackground').toggle();
});
fiddle

jquery change html and use slideDown in the new HTML

I am trying to change a piece of my html using the .html, but i want add some slideDown effect, so i'm trying like this:
$('.section').slideDown(500, function () {
$(this).html(html);
});
But is not working, the html change but the animate is not happening.
What i am doing wrong?
Example:
<p class="click">Click me</p>
<div class="section">
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
</div>
$('.click').on('click', function() {
$('.section').slideDown(500, function () {
$(this).html('two');
});
});
Fiddle: http://jsfiddle.net/fa7Ld2j1/
You can use this sequence:
$('.click').on('click', function () {
$('.section').slideUp(4500, function () {
$(this).find('p').html('two');
$('.section').slideDown(500)
});
});
jsFiddle example
The function to load the html is called as the success function, i.e. after the animation completes.
You can probably try this:
$('.section').hide(); // hide the section
$('.section').html(html); // populate..
$('.section').slideDown(500); // Slide Down
Hope it helps.. :)
Edit: Arguments for the slideDown can be checked
here ...
The slideDown is used to show something hidden,try the slideUp and then add alert(...) in the callback function.u will see the effect.
hope it helps

jquery change text on image hover multiple changes

I'm trying to change text depending on which image a user hovers over. I've got that sorted but now I'm struggling with getting the text to return to it's default content. At the moment when you hover, the text changes to the desired text but after the hover, the text disappears? Please can someone tell me what I've done wrong..
My html
<body>
<div id="container">
<img id="one" src="#" />
<li><img id="two" src="#" /></li>
<h2>Some Text</h2>
</div>
</body>
my jquery
$(document).ready(function() {
$('#one').hover(function() {
$('h2').text('one');
},function(){
$('h2').text('');
});
$('#two').hover(function() {
$('h2').text('two');
},function(){
$('h2').text('');
});
});
jsfiddle...
http://jsfiddle.net/davidhudson/afdc9jL3/
Try this : $('h2').text(''); this is clearing out your text after mouse out event. You can store the original text in some variable and set it when mouse out.
$(document).ready(function() {
//store original text
var text=$('h2').text();
$('#one').hover(function() {
$('h2').text('one');
},function(){
//set original text
$('h2').text(text);
});
$('#two').hover(function() {
$('h2').text('two');
},function(){
//set original text
$('h2').text(text);
});
});
DEMO
EDIT - as OP can reduce the script by using comma seperated jquery selectors because both (#one and #two) having same code for hover event. use below code
$(document).ready(function() {
var text=$('h2').text();
//comma seperated list of selector
$('#one,#two').hover(function() {
$('h2').text($(this).attr('id'));
},function(){
$('h2').text(text);
});
});
DEMO with combined selectore

jQuery working on second click only

Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (i.e. doesn't work on odd number click and works on even number click).
HTML:
<div class="slider">
<div class="slider-box ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
</div>
</div>
jQuery:
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
});
});
I also tried but didn't work
$(document).ready(function() {
$("a.ui-slider-handle").mousedown(function() {
alert('test');
});
});
Hmm... have you tried to prevent the default anchor behavior? http://jsbin.com/IfirEBOj/2/edit
$("a.ui-slider-handle").click(function( event ) {
event.preventDefault();
alert('test');
});
In any case you should get familiar with some debugging tool and see what errors it throws. If any...
add: return false; to your command
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
return false;
});
});
Have you tried to void the href attribute?
$(document).ready(function(){
$("a.ui-slider-handle").attr('href', 'javascript:void(0)').click(function(){
alert('test');
});
});
Try this:
<div id="slider"></div>
$(document).ready(function () {
$("#slider" ).slider();
$("#slider").on('click','a',function () {
alert('test');
});
});
check the fiddle:
http://jsfiddle.net/3zEX5/2/
UPDATE:
I think you are clicking on the div first and then the anchor tag comes near it i.e the small slider button. so you are feeling as it is working on odd click, if you can clearly tell you requirment then we can suggest you some way

Jquery show hide not working

<div class="content" id="current">
<div id="loader" style="display:none;"><img src="/images/loader.gif" alt="" /></div>
</div>
I have this code. Above, which is a Box, and on submitting a button, I want a loader image there then when i get the response back, i want the image that s in the response to fadeIn.
When i click submit, I dont see the loader and I dont see the image replacing into #current.
$('#Submit').click(function (e) {
$('#error').html("");
e.preventDefault();
code = $('#Code').val(),
$('#loader').show();
$.post('/home/foo/', { code: code },
function (data) {
$('#loader').hide();
alert(currentItem.ItemImage);
$('#current').html(currentItem.ItemImage);
How can i fix this?
What am i doing wrong?
I'm thinking you need a semicolon after this line, not a comma:
code = $('#Code').val(),
to
code = $('#Code').val();
Turns out that within css .content img {display: none} was causing loader not to show.

Categories

Resources