I was wondering how could we do this... Got nothing on my mind...
So my question Title might be confusing so here's full question.
How can we run our animation but skip animation of one class that contain .current...
This is menu animation so I don't want to animate current class as there's no point.
I was able to stop it by adding another class in CSS and using !important for height.
This way it looks like there's no animation but if I inspect elements, of course there is...
JS Code:
$("#topMenu li").mouseover(function(){
$(this).find('span').stop().animate({ height:'45px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});
$("#topMenu li").mouseout(function(){
$(this).find('span').stop().animate({ height:'0px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});
var currentPage = $('#topMenu span').hasClass('current');
if(currentPage === true) {
$('span.current').css('display', 'block');
}
So I am able to do this to look like there's no animation... But can we do it somehow so there's really no animation for the element that contain .current class in it ?
$(this).find('span:not(.current)').stop().animate...
You could add :not in the selector:
$('#topMenu li:not(.current)').mouseover(...)
If the class is being added dynamically after the event handlers have been added, move the check to be inside the handler:
$('#topMenu li').mouseover(function () {
if ($(this).hasClass('current')) return;
// etc
});
Related
Thank for the recomendations, I have updated my ask.
I have the next code:
https://jsfiddle.net/btq7mm0h/3/
Is a simply counter starts when the document is ready. I would like that it will start when the div id="testimonios" is visible on screen because when I do scroll to down for to see the effect is already can't see.
What I have made, I find several plugin js like
https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery
Add script in my document and modified the code:
if $('#testimonios').visible( true ) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
Please any suggestion.
There's a few ways to go about this such as using a timer, pure javascript and jquery has a few variations. Here's one way to go about this.
$("#testimonios").bind("DOMSubtreeModified", function() {
// do whatever here, you can even add an if statement for css such as
var cssCheck = $(this).css('display');
if (cssCheck == "block") {
// Div Display is Visible
alert("isVisible");
} else {
// Div Display is not Visible
alert("isNotVisible");
}
});
You can see the result at codebin: http://codebins.com/bin/4ldqoyk
I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
Explanation in context(WordPress):
I want to check if my li element has a class called "current-menu-item" if it does I want it to stop the animate function. If it does not have that class continue animating. This script is currently not working. Thanks for any help.
$(document).ready(function ()
{
$('.nav li a').hover(function()
{
if ($(this).parentNode.hasClass('current-menu-item'))
{
alert('this item has the class of current-menu-item');
}
else
{
$(this).animate({color:'#3b3b3b'}, 300, 'linear');
}
},
function()
{
if ($(this).parentNode.hasClass('current-menu-item'))
{
// do nothing
}
else
{
$(this).animate({color:'#999'}, 300, 'linear');
}
});
});
if ($(this).parent().hasClass('current-menu-item'))
jQuery objects don't have a parentNode property. DOM elements do, but then the element returned by parentNode doesn't have jQuery methods like .hasClass(). Use jQuery's .parent() method instead.
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>
I've been working to find a solution for a jQuery problem.
I have a parent container with 2 divs and a link in each. If a link is clicked in one of the divs, a class is added to the parent container (to change the background). If the other link is clicked, I wanted to check if a class has already been added from the other link's click and be removed.
What's going on: When I click the first link, the class inside-office is added. Then I click the second link and it will add that without removing the first link.
Here's the code I have so far with no success:
$("a.in-office").click(function() {
if($('#fullwrap').hasClass('outside-office')) {
$(this).removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
if($('#fullwrap').hasClass('inside-office')) {
$(this).removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Change the $(this) to $('#fullwrap') as you are checking the class on element with id "fullwrap".
This is what you need.
Explanation: Your $(this) is never referring to $('#fullwrap') which it should. Your $(this) is actually referring to either $('a.in-office') or $('a.out-office').
CORRECT CODE:
$("a.in-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('outside-office')) {
$this.removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('inside-office')) {
$this.removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Use toggleClass. It will remove the class if it exists, else add it.
$(this).toggleClass('outside-office');
If one of the class is already present, you can switch between the two classes using
$(this).toggleClass('outside-office inside-office');