jQuery animate prevent all boxes sliding up together - javascript

I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption').stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption').stop().animate({height: "8%"}, 1000, function() {
});
});
});
Now after much reading I found that I need to use "this" so I tried this:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption', this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption', this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.
In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.
I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.

Try taking the .caption out of your animate function and just use the reference to this like this
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
The this object when used with a jquery even is a reference to the specific element the event was called on.

Ah I got it !
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
Just changed .box to .caption and its working, Thank you guys for you help !
I am going to mark yours as correct though since your answer did put me in the right direction and I only had to make that small change.

Related

Add and then remove <p>

I want add <p> with text when my form have some error. I write some js code, but it does not work now.
My question is: how can i add text, if i have error, show it 1800 ms, add then remove this text?
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
$('.er-msg').animate({ opacity: 0} , 1800);
$('.er-msg').remove(); //don't work
}
};
....................
});
I hope someone help me.
Now your animation takes 1800ms and, from what I understand, you want a delay of that time before you hide the message. So you should start with a setTimeout like this
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);
jQuery animate takes a 3rd parameter, which is a function that will be called after the animation is over. Then you can add this, to make the message disappear.
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800, function () {
$(this).hide().remove();
});
}, 1800);
When you put this in the error callback, after the append line, and get rid of the last two, you should be good to go.
The append of <p> is not working that's why you can't remove it.
Try it this way:
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>");
$('.er-ms').text('Maximum upload size 50MB. Please try again');
$('.er-ms').animate({ opacity: 0} , 1800);
$('.er-ms').remove();
}
};
....................
});
Is the actual append even happening?
I suspect it is not because you are appending <p> dynamically.
In order to successfully bind to this, you will be need to target its wrapper.
for example:
$('form').on(eventname, targetElement, function(){
....the behavior you want
});
you can check out this blog post for more info: http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/
Another way to do is it to create the <p> and set it to display: none then you can just toggle it as needed.
html:
<p class='er-msg'>Maximum upload size 50MB. Please try again</p>
CSS:
.er-msg {
display: none
}
jQuery:
error: function () {
$('.er-msg').fadeIn("slow");
setTimeout(function(){
$('.er-msg').fadeOut("slow");
}, 1800);
}
As a personal suggestion, I would make the timer slightly higher to accommodate people that don't read fast. This way your error message is effective for anyone that happens to see it.
JSFIDDLE DEMO
Simple solution
Here is an example how you could do this:
var errorMessage = 'test message';
$('#question-header').append(
$(
'<p class="er-msg">' +
errorMessage +
'</p>'
).animate(
{opacity: 0},
1800,
function(){
$(this).remove();
}
)
);
You can call a function inside animate that runs after animation is complete. Try to run this on this page in your console. Note that with this multiple error can be thrown in different orders and they will all show the correct behavior. You couple the animation and the removal to all your unique error messages in a simple way.
Your code does not work because text should be called on that created element not the element your appending it to.
Proper way:
$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));
But I think the example above is a lot more readable, abstract and more performant.

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 );
});

display animation every time clicks a button using jQuery

This issue has been solved by changing the blink function to include an ordering to all objects.
Here is the latest jsfiddle in case you're interested.
http://jsfiddle.net/6UjF3/4/
I am trying to make a page where it display different section based on users choice.
When you click one button, it shows two objects in animated order, one object would appear after another. This effect needs to be repeat every time you click the corresponding button. Now the problem is that when user switches between two buttons, the blink animation won't always show the correct order of objects.
here is the functions i used:
$(document).ready(function()
{
function blinkObject () {
$('.blink').fadeTo(0,0);//hide at first
$('.blink').each(function(i) {//for each blink
$(this).delay(i*1500).animate({opacity: '1'}, 1000);
});
}
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "block"});
$(".page2").css({"display": "none"}); //
blinkObject ();
});
$("#b2").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "none"});
$(".page2").css({"display": "block"}); //
blinkObject ();
});
});
Here is the jsfiddle: http://jsfiddle.net/6UjF3/3/
ps: i updated the jsfiddle with one of the answers and now it has been working pretty well, except the order will be incorrect after switch back and forth a few times.
this might be easier
jQuery
function blinkObject(p) {
$('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
$(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
}).end().siblings('.page').hide();//hide siblings
}
$('.page').first().siblings('.page').hide();//hide all but first
$(".but").each(function(i){
$(this).on('click', function() {
blinkObject(i);//run blink
});
});
I added a class of page on the pages, and a class of but on the buttons.
made a fiddle: http://jsfiddle.net/filever10/rruM9/
Here what I came up with but I have to go so I cant help any further.
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});
The key is the stop(). This will stop other animations from running and make it switch smoother.
http://jsfiddle.net/6UjF3/2/
You forgot to remove invisible class from page1, this works.
$("#b1").click(function(){
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});

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();
});
}

Jquery mouse-over fade-in/out (best practices)

I've got working Jquery code to fade in/out descriptive text in a div below the question. The problem? The solution is not very elegant. Here's what I've got:
$("#home").mouseover(function() {
$("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
$("#homeText").fadeOut();
});
I know there is better way to do this, I'm just not sure what it is.
you could use hover, the first function will act on a "hover over" and the second will act on a "hover out"
The documentation is located here: http://docs.jquery.com/Events/hover
$("#home").hover(function(){
$("#homeText").fadeIn("slow");
},
function(){
$("#homeText").fadeOut();
});
How about 3 lines?
<script>
$(function () {
$('#home').hover(function() {
$('#homeText').fadeToggle("slow");
});
});
</script>
Elegant enough?
Jon, Great advice! I used as a staring point though for a more complete solution. Doing this with just the basic hover would still leave me with a hover call for single menu item..A lot of redundant code. So using what you suggested, I came up with this:
$('.topMenu').hover(function()
{
$('#_'+this.id).fadeIn("slow");
},
function ()
{
$('#_'+this.id).fadeOut();
});
});
All menu items are given the topMenu class and ID. The corresponding div to display is the same id as the menu item, just prefixed with _
Example:
....
Stuff about us!
...
Thanks!
$(function () {
$('#home').hover(function() {
$('#homeText').fadeIn("slow");
});
$('#home').mouseout(function() {
$('#homeText').fadeOut("slow");
});
});

Categories