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);
Related
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.
I have one question about add and remove class using css animation.
I have created this DEMO from codepen.io
In this demo you can see there is six round div. Also there is one link (Click here).
If you click to Click here button then you can see the CSS animation. So i want to add a jquery code. Like first the six round div is display:none; when you click Click here button then six round div open with animation but only one time. after then when you click again Click here button then six round div automatically remove with css animation.
Anyone can help me here ?
Check to see if the added class is present and remove/do animation if it is. Check out hasClass();
Edit: Add something similar to this in your handler:
var circle = $('.circle');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
codepen
$(document).ready(function() {
$('.wrap').css('display', 'none');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
$('.circle').addClass('animated bounceInUp');
$(this).parent('.note a').removeClass('.circle bounceInUp');
$(".note a").off('click'); //remove click handler.
//Adding the new click handler
$(".note a").click(function(e) {
e.preventDefault();
$('.circle').addClass('animated bounceOutDown');
$(this).parent('.note a').removeClass('.circle animated bounceOutDown');
$(".note a").off('click'); //remove click handler again.
});
});
});
Add a second click handler to the button
First of all you need to do to delete the following line within the .circle
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
Then you can use Mouser's and sareed's code:
$(document).ready(function() {
var circle = $('.circle');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else
{
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
});
});
I hope this will help you.
So I've got it to work that it shows/hides the UL's/LI's, but I'm not sure what I'm doing incorrectly where it's not swapping out the +/- signs?
Here's my JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});
I have a class setup to append the li with a li:before that add the + sign before the li that has the nested ul's. But I'm not sure if I am going about it the right way to swap out the signs.
Here's the fiddle that I made:
http://jsfiddle.net/bc4mg13a/
There you go: http://jsfiddle.net/bc4mg13a/13/
$(".menu-item-has-children").on("click", function(e){
e.stopPropagation();
var clickedLi = $(this);
$("> ul", clickedLi).slideToggle();
clickedLi.toggleClass("current");
});
To start with, your first js line is a has so much redundant stuff.
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click
could be:
$(".top ul li:not(.current)").find("ul").hide().end() // Hide all other ULs
.click
On the other hand, i changed your code slightly, simplified your selectors. On each li click, i select direct ul children, and the i slidetoggle + toggle class the 'current' class.
i also switch the plus sign via the current class on css.
Your code feels incredibly verbose. Well, at least your js. Here's a fiddle of your code that I modified a little bit.
Instead of hiding all your menus with js immediately on pageload, I applied a CSS display: none; to the sub-menu class:
.sub-menu {
display: none;
}
The js is cleaned up a bit, and since the click handler is bound to .menu-item-has-children, You're really only clicking on that to reveal the contained UL.
Give it a look. Hope it helps :)
Simply add:
$(this).toggleClass('open');
To this:
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // <--
}
you can just add $(this).toggleClass('open'); before you return false but I would strongly look more into what your code is doing. I'm not so sure the line before is doing anything.
Fixed JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // added
}
return false;
});
Just added "$(this).toggleClass('open');" to use the class you specified in your CSS instead of trying to manipulate the text manually.
you can do it like this and add $(this).toggleClass('open');
http://jsfiddle.net/bc4mg13a/5/
For how you have it set up, I would try...
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).toggleClass("open");
$(this).children('ul').slideToggle();
}
return false;
});
Additional:
For formatting, you might want to do something like:
.menu-item-has-children {
&:before {
content:"+ ";
color: $white;
width: 10px;
display:inline-block;
}
}
.open {
&:before {
content:"- ";
color: $white;
width: 10px;
display:inline-block;
}
}
You don't need to use text(this.toggle ? "-" : "+");
Inside the condition, just toggle the class .open that you have already defined in your SCSS/CSS.
Like so -
$(this).toggleClass('open');
JSFiddle
I have a small problem with a list definition. Basically, I have a fadein effect on my lists (which works) but the problem is that when my <li> appear, they are not inline-block. So I add the inline-block in the JS, but fadein vanishes ..
function fadeLI(elem) {
elem.fadeIn(500, function() {
fadeLI($(this).next().css("display","inline-block"));
});
}
fadeLI($("#portfolio li:first"));
Here is an example : http://jsfiddle.net/mqthK/426/
Do you have any idea?
Try
function fadeLI(elem) {
elem.css('opacity', '0').addClass('test').stop().animate({opacity: 1}, 'slow', function() {
var $next = $(this).next();
if($next.length)
fadeLI($next);
});
}
fadeLI($("#test li:first"));
Demo: Fiddle
.test {
display: inline-block;
}
http://jsfiddle.net/mqthK/429/
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>