jQuery Animate does unintended things to my CSS. When animating paddingLeft, it sets div to display: none; that's unintended and I can't figure out why it does that. JSFiddle
<script>
$("#menu-toggle").click(function(event){
event.preventDefault();
if($('#sidebar-wrapper').width() == 0){
$("#sidebar-wrapper").animate({
width: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});$("#page-content-wrapper").animate({
paddingLeft: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});
}else{
$("#sidebar-wrapper").animate({
width: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});$("#page-content-wrapper").animate({
paddingLeft: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});
}
});
</script>
SOLVED:
Here's a Solve if anyone is interested: FixedFiddle
From the Docs:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated.
http://api.jquery.com/animate/
If my memory serves, and as the docs indicate, these shortcuts do extra work to literally "show" and "hide" the element on animation start and complete. It would seem jquery takes into account the initial display and then stores that to restore it later. Toggle is just a macro of "show" and "hide" and seems to function in the same way.
Related
I was working on making my animations work dynamically for various elements when I ran into this problem (right when I was about to finish too). I can't animate properties using the JQuery css() method. I was able to get the animation working with hard coded values for the height, width, and top properties. Here's the snippet:
function shrinkSection(section){
var elem = section.SectionID;
$(elem).find(".content").fadeOut(500);
$(elem)
.animate({top: $(elem).css('top'), height: $(elem).css('height')}, 500)
.animate({width: $(elem).css('width')}, {duration: 500,
complete: function() {
$(elem).find(".icon").fadeIn(500);
$(elem).addClass("active");
}
});
}
console.log() reveals that $(elem).css('[PROPERTY]') IS returning the correct css value. Any ideas why this won't work?
The animate() method queues the effects and waits till the first effect animation is finished to start the second one, so they are serially applied. From jquery docs:
queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
If you want the animations to happen in "parallel", you can do:
$(elem).find(".content").fadeOut(500);
if( $(elem).length )
$(elem)
.animate( { top: $(elem).css('top'), height: $(elem).css('height')},
{ duration: 500,
queue: false,
complete: function() { alert('callback!!'); } }
)
.animate( { width: $(elem).css('width')},
{ duration: 500,
queue: false,
complete: function() {
$(elem).find(".icon").fadeIn(500);
$(elem).addClass("active");
}
});
else
alert("No elem found!!");
Notice in the example, that you could check that the element elem on which you apply the effect is actually found by jquery.
This way you track possible DOM selector problems also.
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});
Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle
It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect
I am using the jQuery plugin Gridster.
I have made an add_widget button which adds a new widget. This widget can be deleted again also.
All this is working properly. But when you click the header it should trigger a sliding box. But this sliding box doesn't work on newly added widget, only on the widgets that were there from the start.
HELP!!!!
See this fiddle:
http://jsfiddle.net/ygAV2/
I suspects the:
addbox part
//add box
$('.addbox').on("click", function() {
gridster.add_widget('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><div class="box"><div class="menu"><header class="box_header"><h1>HEADER 5</h1></header><div class="deleteme">delete me ;(</div></div></li>', 2, 1)
});
and the sliding box part:
// widget sliding box
$("h1").on("click", function(){
if(!$(this).parent().hasClass('header-down')){
$(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else{
$(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
The use of .live() is deprecated. http://api.jquery.com/live/
So using the correct way, .on(event, selector, handler) on all your click events.
You will achieve your desired result.
Here is a code snippet
$(document).on("click", 'h1', function() {
if (!$(this).parent().hasClass('header-down')) {
$(this).parent().stop().animate({
height: '100px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).addClass('header-down');
} else {
$(this).parent().stop().animate({
height: '30px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).removeClass('header-down');
}
});
and here
//remove box
$(document).on('click', ".deleteme", function () {
$(this).parents().eq(2).addClass("activ");
gridster.remove_widget($('.activ'));
$(this).parents().eq(2).removeClass("activ");
});
and also here
$(document).on("click", ".box_header", function (e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
I have updated your jsfiddle: http://jsfiddle.net/ygAV2/2/
Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API