Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
Related
I am trying to make the first square box onhover, then show the bigger box a little bit delay then when I move the mouse hover the big box, the big box still appears.However, my code works incorrectly.
If someone could please help me out? Thanks
Sample http://jsfiddle.net/9oLs3fyh/
var timeout;
$("#box1").hover(function () {
clearTimeout(timeout);
$("#box2").delay(500).show();
}, function () {
timeout = setTimeout(function(){
$("#box2").delay(500).hide();
},500);
});
if($("#box2").is(':hover')){
$("#box2").show();
}
var timeout;
$("#accountIcon").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
if($("#accountPopup").is(':hover')){
$("#accountPopup").show();
}
DEMO
I think this is a good way to achieve that by wrap your divs inside one div
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner{
overflow:hidden;
}
var timeout;
$(".conatiner").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
DEMO HERE
and while you use hover .. you can just use css with visibility and transition delay
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner:hover #accountPopup{
display: block;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
DEMO
Try assiging class hovered (check the DEMO):
CSS
.hovered { display:block }
On mouseenter of #accountIcon assign class hovered on #accountPopup element.
Then, on mouseleave, if the target element (#accountPopup) is not visisble, just remove the class.
$('#accountIcon').on('mouseenter', function() {
$('#accountPopup').addClass('hovered');
}).on('mouseleave', function() {
var target = $('#accountPopup');
if (!target.is(':visible')) {
target.removeClass('hovered');
}
});
$('#accountPopup').on('mouseleave', function() {
$(this).removeClass('hovered');
});
Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!
$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions
It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.
updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/
I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});
You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle
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.
Javascript
$(document).ready(function() {
$(".container").animate({left:'120px'}, 6000).queue(function(next){
$(".child").css('display', 'none');
});
});
The above script animates a box and then hides it after the animation is completed.
The problem is that I have a set of identical boxes, and I want to animate each of them. I am trying to use .each to get it to work but so far it doesnt work at all.
So to highlight my question once more*I want to animate a set of identical boxes one after the other in chronological order (html-vise, the one on top first, then the next), and then hide the box setting the css property and value. This works for one box, but not for several. I tried using .each, but no good news there.*
HTML
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
function queue(start)
{
var rest = [].splice.call(arguments, 1),
promise = $.Deferred();
if (start)
{
$.when(start()).then(function () {
queue.apply(window, rest);
});
} else {
promise.resolve();
}
return promise;
}
function animate()
{
queue(function () {
return $( ".child:first" ).animate({opacity: "show"}, "slow").delay(1500);
}, function () {
return $( ".child:first" ).animate({opacity: "hide"}, "slow");
}, function () {
return $( ".child:second" ).animate({opacity: "show"}, "slow").delay(1500);
}, function () {
return $( ".child:second" ).animate({opacity: "hide"}, "slow");
}});
}
call animate when you want to fade in and out your divs
You can also do it this way !
<script>
$(document).ready(function() {
$(".container").animate({left:'120px'}, 6000).queue(function(next){
var childs = $('.child'),
i = 0;
(function() {
$(childs[i++]).hide('slow',arguments.callee);
})();
});
});
</script>
Hope this can help you