We Keep Coding

jQuery hide and show effect seen at function end

Consider the following code:
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on( 'click', function() {
$("#thediv").show();
alert('click');
});
$(document).ready(function(){
$("#thediv").hide();
})
I want the behavior to first show the div tag and then display the alert "Click". Instead the behavior works in the opposite way. Alert text is first displayed followed by the button being visible. Am i missing something ?
Can i modify the code somehow to get the desired behavior where the div is first displayed and then alert text is flashed.

Check that in jQuery.show(options) allows you to pass a PlainObject options.
And than you can use complete: A function that is called once the animation on an element is complete.
Code:
$("button").on( 'click', function() {
$("#thediv").show({
complete: function() {
alert('click');
}
});
});
$(document).ready(function(){
$("#thediv").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

It's because the alert() blocks the UI thread from updating, and that thread has not yet had time to show the element in the DOM before you call the alert().
Ideally you should use console.log() for debugging, however you can avoid this issue by putting the alert() in a setTimeout() with a very short delay.
$("button").on( 'click', function() {
$("#thediv").show();
setTimeout(function() {
alert('click');
}, 10);
});
#thediv { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

$("button").on('click', function() {
$("#thediv").show("slow", callback);
});
$(document).ready(function() {
$("#thediv").hide();
})
function callback() {
alert('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>
Add parameter to .show()

Block fadeout when mouse over or click event on div

I used below code to fade-out #widget in 10 secs and fade-in #floating_widget in 10.2secs. This works fine.
But, #widget container should not fade-out when i clicked or mouseover #widget container. Now, it fade-out automatically because of setTimeout code.
Please let me know how to fix this issue? Thanks
HTML:
<div id="widget">
<h1>Hello World!</h1>
</div>
<div id="floating_widget">
<h2>Hello World 2!</h2>
</div>
JS:
setTimeout(function() {
$('#widget').fadeOut('slow');
}, 10000);
setTimeout(function() {
$('#floating_widget').fadeIn('slow');
}, 10200);
$('#floating_widget').click(function(){
$(this).hide();
$('#widget').show();
});

I hope I got the right understanding of your question. It seems that you have a problem with the timeouts. You will have to clear them in a onmouseover function. Here is an example of the JavaScript:
var $widget = $('#widget')
var $floatingWidget = $('#floating_widget')
var widgetFadeTimeout = setTimeout(function() {
$widget.fadeOut('slow')
}, 10000)
var floatingWidgetFadeTimeout = setTimeout(function() {
$floatingWidget.fadeIn('slow')
}, 10200)
$widget.mouseover(function() { // https://api.jquery.com/mouseover
// Remove the timeout to avoid triggering the fadeOut and fadeIn
clearTimeout(widgetFadeTimeout) // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
clearTimeout(floatingWidgetFadeTimeout)
// In case the element began the transitions stop them
$widget.stop()
$floatingWidget.stop()
$floatingWidget.hide()
$widget.show()
})
$floatingWidget.click(function() {
$(this).hide()
$widget.show()
})
I hope this will be useful for you!

Fade in and fade out text at the same location

I want to write a code which can toggle two sentences fading in and fading out. But I want to toggle the sentences at the same location ie one text fades and the other starts coming in place of the first. In this case the sentences occur one below the other. Is there any way I can do this as in html content always comes one below the other.
This is the jquery script.
<script>
$(document).ready(function(){
$(function(){
$("#hide1").hide();
while(1)
{
$("#hide2").fadeOut(3000);
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000);
$("#hide2").fadeIn(3000);
}
});
});
</script>
Html
<p id="hide1"> Hide 1 <p>
<p id="hide2"> Hide 2 <p>

Demo
Try like this make the queue and animate
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000);
$("#hide2").fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000, hide1);
}
hide1();
OR Chaining
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000).fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000).fadeOut(3000, hide1);
}
hide1();
This code would react dynamically, and it does not need any changes even if you want to apply this effect for more than two p elements
$("p").hide();
function test(elem) {
elem.fadeIn(1000, function () {
elem.fadeOut(1000, function () {
test(elem.next('p').length ? elem.next('p') : $('p:first'));
});
});
}
test($('p:first'));
DEMO

Try this:
setInterval(function () {
$('#hide1').fadeOut(1000, function () {
var $this = $(this);
$this.text($this.text() == 'Hide 2' ? 'Hide 1' : 'Hide 2');
$this.fadeIn(1000);
});
}, 3000);
Toggle the text within the setInterval function.
Fiddle Demo

Use a single paragraph tag and toggle the text within it while you try to fade it in and out.
$(document).ready(function(){
$(function(){
window.setInterval(function() {
$("#hideorshow").fadeToggle(1000, "linear", function() {
$("#hideorshow").text($("#hideorshow").text() === "Hide 1" ? "Hide 2" : "Hide 1");
$("#hideorshow").fadeToggle(1000, "linear");
});
}, 2000);
});
});
Also, I would suggest you use fadeToggle() instead of fadeIn() and fadeOut().
Here is a working JSFiddle demo.

Using setTimeout to delay timing of jQuery actions

I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.
I must have the code wrong, as the final text replacement never happens.
Also, how would I animate introducing the replacement text (window blinds, for eg.)?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>

.html() only takes a string OR a function as an argument, not both. Try this:
$("#showDiv").click(function () {
$('#theDiv').show(1000, function () {
setTimeout(function () {
$('#theDiv').html(function () {
setTimeout(function () {
$('#theDiv').html('Here is some replacement text');
}, 0);
setTimeout(function () {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
jsFiddle example

Try this:
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);

You can also use jQuery's delay() method instead of setTimeout(). It'll give you much more readable code. Here's an example from the docs:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
The only limitation (that I'm aware of) is that it doesn't give you a way to clear the timeout. If you need to do that then you're better off sticking with all the nested callbacks that setTimeout thrusts upon you.

This is how I solved the problem
The menu closes a few seconds after mouse out (that if hover didn't fire),
//Set timer switch
$setM_swith=0;
$(function(){
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse").mouseleave(function(){
$setM_swith=1;
setTimeout(function(){
if($setM_swith==1) {
$(".navbar-collapse").collapse('hide');
$setM_swith=0;}
}, 3000);
});
$(".navbar-collapse").mouseover(function() {
$setM_swith=0;
});
});

Text blinking jQuery

What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks

A plugin to blink some text sounds a bit like overkill to me...
Try this...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});

Try using this blink plugin
For Example
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
It is also a very simple plugin, and you could probably extend it to stop the animation and start it on demand.

here's blinking with animation:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
just give a blink class whatever u want to blink:
<div class="someclass blink">some text</div>
all regards to DannyZB on #jquery
features:
doesn't need any plugins (but JQuery itself)
does the thing

If you'd rather not use jQuery, this can be achieved with CSS3
#-webkit-keyframes blink {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}
Seems to work in Chrome, though I thought I heard a slight sobbing noise.

Combine the codes above, I think this is a good solution.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
At least it works on my web.
http://140.138.168.123/2y78%202782

Here's mine ; it gives you control over the 3 parameters that matter:
the fade in speed
the fade out speed
the repeat speed
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);

You can also use the standard CSS way (no need for JQuery plugin, but compatible with all browsers):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
W3C Link

This is the EASIEST way (and with the least coding):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Fiddle
Now, if you are looking for something more sophisticated...
//Blink settings
var blink = {
obj: $(".blink"),
timeout: 15000,
speed: 1000
};
//Start function
blink.fn = setInterval(function () {
blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);
//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
clearInterval(blink.fn);
//Ensure that the element is always visible
blink.obj.fadeIn(blink.speed);
blink = null;
}, blink.timeout);
Fiddle

You can also try these:
<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>
<script>
function startBlink(){
window.blinker = setInterval(function(){
if(window.blink){
$('.blink').css('color','blue');
window.blink=false;
}
else{
$('.blink').css('color','white');
window.blink = true;
}
},500);
}
function stopBlink(){
if(window.blinker) clearInterval(window.blinker);
}
</script>

$.fn.blink = function(times, duration) {
times = times || 2;
while (times--) {
this.fadeTo(duration, 0).fadeTo(duration, 1);
}
return this;
};

Here you can find a jQuery blink plugin with its quick demo.
Basic blinking (unlimited blinking, blink period ~1 sec):
$('selector').blink();
On a more advanced usage, you can override any of the settings:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
There you can specify the max number of blinks as well as have access to a couple of callbacks: onBlink and onMaxBlinks that are pretty self explanatory.
Works in IE 7 & 8, Chrome, Firefox, Safari and probably in IE 6 and Opera (although haven't tested on them).
(In full disclosure: I'm am the creator of this previous one. We had the legitimate need to use it at work [I know we all like to say this :-)] for an alarm within a system and I thought of sharing only for use on a legitimate need ;-)).
Here is another list of jQuery blink plugins.

this code is work for me
$(document).ready(function () {
setInterval(function(){
$(".blink").fadeOut(function () {
$(this).fadeIn();
});
} ,100)
});

You can try the jQuery UI Pulsate effect:
http://docs.jquery.com/UI/Effects/Pulsate

Easiest way:
$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);
You can repeat this as much as you want or you can use it inside a loop. the first parameter of the fadeTo() is the duration for the fade to take effect, and the second parameter is the opacity.

$(".myblink").css("text-decoration", "blink");
do not work with IE 7 & Safari. Work well with Firefox

This stand-alone solution will blink the text a specified number of times and then stop.
The blinking uses opacity, rather than show/hide, fade or toggle so that the DIV remains clickable, in case that's ever an issue (allows you to make buttons with blinking text).
jsFiddle here (contains additional comments)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var init = 0;
$('#clignotant').click(function() {
if (init==0) {
init++;
blink(this, 800, 4);
}else{
alert('Not document.load, so process the click event');
}
});
function blink(selector, blink_speed, iterations, counter){
counter = counter | 0;
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(blink_speed);
$(this).animate({opacity:1}, 50, function(){
counter++;
if (iterations == -1) {
blink(this, blink_speed, iterations, counter);
}else if (counter >= iterations) {
return false;
}else{
blink(this, blink_speed, iterations, counter);
}
});
$(this).delay(blink_speed);
});
}
//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));
}); //END $(document).ready()
</script>
</head>
<body>
<div id="clignotant" style="background-color:#FF6666;width:500px;
height:100px;text-align:center;">
<br>
Usage: blink(selector, blink_speed, iterations) <br />
<span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
Note: fn call intentionally missing 4th param
</div>
</body>
</html>
Sources:
Danny Gimenez
Moses Christian

Link to author
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>
<script type="text/javascript" >
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('#msg');
</script>

I was going to post the steps-timed polyfill, but then I remembered that I really don’t want to ever see this effect, so…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}

I feel the following is of greater clarity and customization than other answers.
var element_to_blink=$('#id_of_element_to_blink');
var min_opacity=0.2;
var max_opacity=1.0;
var blink_duration=2000;
var blink_quantity=10;
var current_blink_number=0;
while(current_blink_number<blink_quantity){
element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
current_blink_number+=1;
}

This code will effectively make the element(s) blink without touching the layout (like fadeIn().fadeOut() will do) by just acting on the opacity ; There you go, blinking text ; usable for both good and evil :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);

Blinking !
var counter = 5; // Blinking the link 5 times
var $help = $('div.help');
var blinkHelp = function() {
($help.is(':visible') ? $help.fadeOut(250) : $help.fadeIn(250));
counter--;
if (counter >= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();

This code might help to this topic. Simple, yet useful.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("$('#myID/.myClass').toggle();",500);
});
</script>

I like alex's answer, so this is a bit of an extension of that without an interval (since you would need to clear that interval eventually and know when you want a button to stop blinking. This is a solution where you pass in the jquery element, the ms you want for the blinking offset and the number of times you want the element to blink:
function blink ($element, ms, times) {
for (var i = 0; i < times; i++) {
window.setTimeout(function () {
if ($element.is(':visible')) {
$element.hide();
} else {
$element.show();
}
}, ms * (times + 1));
}
}

Some of these answers are quite complicated, this is a bit easier:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();

Seeing the number of views on this question, and the lack of answers that cover both blinking and stopping it, here goes: try jQuery.blinker out (demo).
HTML:
<p>Hello there!</p>
JavaScript:
var p = $("p");
p.blinker();
p.bind({
// pause blinking on mouseenter
mouseenter: function(){
$(this).data("blinker").pause();
},
// resume blinking on mouseleave
mouseleave: function(){
$(this).data("blinker").blinkagain();
}
});

Indeed a plugin for a simple blink effect is overkill. So after experimenting with various solutions, I have choosen between one line of javascript and a CSS class that controls exactly how I want to blink the elements (in my case for the blink to work I only need to change the background to transparent, so that the text is still visible):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Full example at this js fiddle.

Blink functionality can be implemented by plain javascript, no requirement for jquery plugin or even jquery.
This will work in all the browsers, as it is using the basic functionality
Here is the code
HTML:
<p id="blinkThis">This will blink</p>
JS Code:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
and a working fiddle

This is what ended up working best for me. I used jQuery fadeTo because this is on WordPress, which already links jQuery in. Otherwise, I probably would have opted for something with pure JavaScript before adding another http request for a plugin.
$(document).ready(function() {
// One "blink" takes 1.5s
setInterval(function(){
// Immediately fade to opacity: 0 in 0ms
$(".cursor").fadeTo( 0, 0);
// Wait .75sec then fade to opacity: 1 in 0ms
setTimeout(function(){
$(".cursor").fadeTo( 0, 1);
}, 750);
}, 1500);
});

I have written a simple jquery extension for text blink whilst specifying number of times it should blink the text, Hope it helps others.
//add Blink function to jquery
jQuery.fn.extend({
Blink: function (i) {
var c = i; if (i===-1 || c-- > 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c); }); });
}
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1
$(".mytext").Blink(-1);

Text Blinking start and stop on button click -
<input type="button" id="btnclick" value="click" />
var intervalA;
var intervalB;
$(document).ready(function () {
$('#btnclick').click(function () {
blinkFont();
setTimeout(function () {
clearInterval(intervalA);
clearInterval(intervalB);
}, 5000);
});
});
function blinkFont() {
document.getElementById("blink").style.color = "red"
document.getElementById("blink").style.background = "black"
intervalA = setTimeout("blinkFont()", 500);
}
function setblinkFont() {
document.getElementById("blink").style.color = "black"
document.getElementById("blink").style.background = "red"
intervalB = setTimeout("blinkFont()", 500);
}
</script>
<div id="blink" class="live-chat">
<span>This is blinking text and background</span>
</div>