The following jsFiddle changes text of #more depending on the visibility of #extra:
<style>
#extra{
display: none;
}
</style>
More about us
<div id="extra">Some Text</div>
<script>
$('#more').click(function() {
if ($('#extra').is(':visible')) {
$(this).text('Less about us');
} else {
$(this).text('More about us');
}
$('#extra').slideToggle('fast');
});
</script>
This works fine. However, it does not work anymore if I put the slideToggle() above the if-statement like this (see this jsFiddle):
$('#more').click(function() {
$('#extra').slideToggle('fast');
if ($('#extra').is(':visible')) {
$(this).text('More about us');
} else {
$(this).text('Less about us');
}
});
In this example, the text will remain "More about us" no matter if #extra is hidden or not. Why?
the code get's executed one line at a time, so by the time you enter the if, the slideToggle isn't finished so the element is visible.
You should put the if statement inside the slideToggle's complete callback http://api.jquery.com/slidetoggle/
$('#more').click(function() {
var _this = this;
$('#extra').slideToggle('fast', function() {
if($(this).is(':visible')) {
$(_this).text('Less about us');
}
else {
$(_this).text('More about us');
}
});
});
jsFiddle
This happens because the animation isn't done before you check the visibility. A cleaner solution would be this:
var visible = false;
$('#more').click(function() {
visible = !visible;
if (visible) $('#extra').slideDown();
else $('#extra').slideUp();
$(this).text(visible ? 'Less about us' : 'More about us');
});
Fiddle
This way you don't have to check the actual visibility of the element. You could use a callback to execute the code after the animation has completed, but that could cause an unwanted delay.
Related
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
I have a simple link that toggles on each click. There's also a hover state that gets added to the link when it is in the 'clicked' state. See example below:
<style>
.added {
&:hover {
background-color: red;
}
}
</style>
<script>
$('a').on('click', function() {
var $link = $(this);
if ( $link.hasClass('added') ) {
$link
.removeClass('added')
.html('Add Me!')
} else {
$link
.addClass('added')
.html('Added');
});
</script>
<a href='#'>Add Me!</a>
The challenge here, is that I'd like the button not to turn red immediately after clicking 'Add Me!' (as the mouse is technically still hovering over the link). It should only turn red once I've clicked, moved off and then returned.
Is there a clean way to do this using either CSS and/or jQuery?
You can achieve this with jQuery's mouseout() function.
Here I've modified your existing code (with some minor fixes) to include a check on mouseout to add a .ready class:
$('a').click(function() {
var link = $(this);
if ( link.hasClass('added') ) {
link.removeClass('added').removeClass('ready').html('Add Me!');
} else {
link.addClass('added').html('Added');
// Check if .ready is applied already
if(!link.hasClass('ready')){
link.mouseout(function(){
link.addClass('ready');
});
}
}
});
and modified your SASS to include .ready:
.added.ready{
&:hover {
background-color: red;
}
}
You can see it in action on this fiddle: http://jsfiddle.net/easL77fa/
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.
We have a block invisible by default and links. When we hover on link, its rel attribute puts to block like a text.
What I'm trying to do:
If link is hovered and block is invisible {
show block by fadeIn;
change text inside block (get it from link's rel);
} else {
just change text inside block (block is already visible, no fadeIn effect);
}
If link is unhovered and block is visible {
start timeout {
after 2 seconds hide block by fadeOut;
}
}
Here is what I'm currently have: http://jsfiddle.net/Bt3mL/1/
Everything works, but there is a problem - fadeOut on mouseleave should not start, if some link is currently hovered. Something like timeout reset can be useful, but I don't understand how to add it to my code.
Now, when I hover a link and then unhover it, timeout begins, but if I hover on other link while block is visible, because of the first timeout block can hide.
Please help.
Clearing the timeout will fix the problem : http://jsfiddle.net/jomanlk/veufa/
var __TIMER = null;
$("a").live('mouseenter', function(){
clearTimeout(__TIMER);
if ($("div").css('display')=='none'){
$("div").html($(this).attr("rel"));
$("div").fadeIn('fast');
} else {
$("div").html($(this).attr("rel"));
}
})
$("a").live('mouseleave', function(){
__TIMER = setTimeout(function(){
$("div").fadeOut('fast');
}, 1000);
});
try this:
var cancelHide = false;
$("a").live('mouseenter', function(){
cancelHide = true;
if ($("div").css('display')=='none'){
$("div").html($(this).attr("rel"));
$("div").fadeIn('fast');
} else {
$("div").html($(this).attr("rel"));
}
})
$("a").live('mouseleave', function(){
cancelHide = false;
setTimeout(function(){
if(cancelHide){ return; }
$("div").fadeOut('fast');
}, 1000);
});
This function should fadeIn the id="Box" when class="display" is clicked if the Box is not animated and has a display value of none Or fadeOut if the #Box had a display value of is not none. What is wrong?
$(document).ready(function() {
$('.display').click(function() {
var currentDisplayValue = $('#Box').css('display');
if (':animated') {
stop()
};
else if (currentDisplayValue == 'none') {
$('#Box').fadeIn("slow");
};
else {
$('#Box').fadeOut("slow");
};
});
Thanks
Try:
$(function() {
$(".display").click(function() {
var box = $("#Box");
if (box.is(":animated")) {
box.stop();
} else if (box.is(":hidden") {
box.fadeIn("slow");
} else {
box.fadeOut("slow");
}
});
});
You've got some syntax errors (eg semi-colons after the curly braces) and stop() needs to be applied to a jquery set. Lastly, don't check the current display CSS value like you're doing. Use the :hidden selector instead.