We Keep Coding

Wow.js not taking two classes for an element at different time intervals

I have an image element, on which I want to apply two animation classes, one on the arrival and one on some fixed time.
For Example, on arrival i want a fadeIn effect. So i do this:
img.classList.add("wow");
img.classList.add("fadeIn");
I again want to add a heartbeat effect on the same image after some time. So i tried something like this:
setTimeout(function () {
img.classList.remove("fadeIn");
img.classList.add("heartBeat");
},3000);
This is not working, and the hearbeat effect is not seen.
Note:
On the other hand, if I don't initially set up the fadeIn effect to the image, then the image does take the heartbeat effect after 3000ms.
So a standalone code like this one, is working perfectly fine.
setTimeout(function () {
img.classList.add("heartBeat");
},3000);
I am not being able to figure out the cause of this problem.

You can cuse the function inside the callback of the WOW instance.
According to the wow.js docs, it is fired every time an animation is started and the "the argument that is passed in is the DOM node being animated" (box, but in this case I'm directly using the img variable).
So, when it is triggered, we can immediately remove the .fadeIn class, which will not affect the animation because it was added inline with JavaScript. In addition, after 3 seconds, we remove the style attribute (that caused the "fade in" animation) and add the .heartBeat class that will trigger the next heartbeat animation.
img.classList.add("wow");
img.classList.add("fadeIn");
new WOW({
callback: function(box) {
img.classList.remove("fadeIn");
setTimeout(function () {
img.removeAttribute("style");
img.classList.add("heartBeat");
},3000);
}
}).init();

jQuery UI Slide - Move content during animation

I'm building a website which relies on jQuery effects and I have a problem with the jQuery Slide effect.
I'm using that through a toggle function for the moment, but that will change in a later stage.
The fact is that I'm hinding an element when a certain action is executed. When you use the function slide the content beneath those elements moves when the animation is completed to take up the free space which was created with the effect.
The problem is that the content is only moved as soon as the animation is completed. Is there any way to move the content when the animation is still running. With other words, I want to move the content together with the animation, but I don't want to call the slide function on my element that should move with it.
I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/6Lg9vL8m/6/
Edit: Question update and fiddle
Here's an update to the question, and please see my original updated fiddle.
When you execute the slide effect in jQuery UI, see the bottom example on my fiddle, the box is moved up, and is somewhere placed behind an invisible screen (tough to explain).
With the animate function, see the top example in my fiddle, the area is shrinked, and that's something which I want to avoid. I want to achieve the effect such as 'Slide' does, but the content under the box must move up immediately with the animation, and not after the animation has been completed.
Edit: Reworked the correct answer in a plugin.
Thanks to the answers I've received here, I found the correct code, modified a bit, and created a plugin from it which I'll place here.
The plugin is called 'Curtain' and can be described as rising the requested element as a curtain and thus move it out of the way.
Here's the source code:
(function($) {
$.fn.curtain = function(options, callback) {
var settings = $.extend( {}, $.fn.curtain.defaults, options);
var tabContentsHeight = $(this).height();
$(this).animate({height:0}, settings.duration);
$(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
$(this).css({"margin-top":0});
if ($.isFunction(callback)) {
callback(this);
}
});
return this; // Allows chaining.
};
$.fn.curtain.defaults = {
duration: 250
};
}(jQuery));
The plugin can be called like this:
element.curtain({ duration: 250 }, function() {
// Callback function goes here.
});
If someone has remarks or a better way to solve this problem, please share it in the comments.

You can do it by using the animate function like this:
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
});
Demo
Updated code to create a "curtain raising" like animation:-
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
$(this).children().animate({"margin-top":"-400px"},2500, function() {
$(this).css({"margin-top":0})
});
});
CSS:
`#square{
overflow:hidden;
}`
Demo 2

This is the effect you wanted?
$('#square').on('click', function(e) {
$(this).animate({height :0},2500 );
});

jQuery MouseEnter/Leave with fadeIn() flickery

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.

Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}

Hover function in js spills over

I have set up my page so that when the user hovers over an image a text shows up and some bubbles. There are eleven images of fish and each one has its own text and bubble. I made sure that there is no overlap in the divs containing the fish, but when one hovers over a particular image the text of some of the other images show up too. This is too distracting since the user would want to see one text at a time. How can I solve this issue? Here is the link to the page: http://arabic001.com/colors

I'm curious myself as to what the common solution is to this problem.
When I run across this situation I use hoverIntent plugin for jquery.
if you went this route, you would change each .mouseOver(),.mouseOut() to the following:
from this
$('#fishBlue').mouseover(function() {
$('#bubblesBlue').toggle('slow');
$('#textBlue').toggle('slow');
});
$('#fishBlue').mouseout(function() {
$('#bubblesBlue').hide('slow');
$('#textBlue').toggle('slow');
});
to this
$('#fishBlue').hoverIntent(function() {
$('#bubblesBlue').toggle('slow');
$('#textBlue').toggle('slow');
});
}, function() {
$('#bubblesBlue').hide('slow');
$('#textBlue').toggle('slow')
});
note
that the hoverIntent plugin requires at least jquery 1.5.1
other tip
I would abstract things a bit more, why rewrite the same thing for each fish.
perhaps use classes
$('.fish').hoverIntent(function() {
$(this).next('.bubble').toggle('slow');
$(this).next('.text').toggle('slow');
});
}, function() {
$(this).next('.bubble').hide('slow');
$(this).next('.text').toggle('slow')
});

How to add animation on open of a Jquery SimpleModal?

The animation-enabled example in the SimpleModal site has this animation:
1. Fade in the overlay
2. Slide down the modal div
This is the code:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function () {
dialog.data.hide();
dialog.container.show('fast', function () {
dialog.data.slideDown('fast');
});
});
}});
I want this animation instead:
1. Just display the modal
2. Fade in the overlay
Alas, simply removing the 2nd parameter of dialog.overlay.fadeIn() from the code above doesn't work. I also tried removing the parameters of dialog.container.show(), also changing it to dialog.container.open(). I've tried other combinations of the code, to no avail.
How do I achieve the animation that I wish?

You can do it like this:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.data.show();
dialog.container.show();
dialog.overlay.fadeIn('fast');
}
});
Since you just want to display it, remove the callbacks altogether and just show the modal and kick off a .fadeIn() on the overlay at the same time :)