Develop Reference

Jquery animate created element

I made div, if i click on it, jquery makes bullet and that element is animated. This is code:
$('.square').click(function() {
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});
It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)
UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/

it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div
like so
$(bullet).animate({ top: value });

Why not timeout the click function with a variable:
var animating = false;
$('.square').click(function() {
if(!animating) {
animating = true;
setTimeout(function() {
animating = false;
}, 2000);
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
}
});
EDIT:
Updated JSfiddle

Continuously scroll an element to bottom and back to top of a parent element

I am trying to automatically .animate the .scrollTop of a <div> contained within another <div>. I have done this so I could hide the scroll-bar thus only display the text. Therefore, I know how to scroll that particular <div> with JQuery as such:
$("#div").animate({ scrollTop: "+=5" }, 200);
But what I am trying to do is to continuously .animate the content until it reaches the bottom of that particular <div> and then animates back to the top of the <div> ( .scrollTop: '0px'). THere is where I am struggling with.
I am currently pulling content into a <div> which the result of a
query. Therefore, I do not know the full length of the content that
will be placed of that <div>.
The <div> that contains the content is within another <div> and I don't think the method to detect the bottom of the <div> works correctly (or perhaps I am doing something wrong).
var div = $(this);
if (div[0].scrollHeight - div.scrollTop() == div.height())
I was wondering if someone can give me a hand with this. Since I have not seen a particular approach like this in this forum or by Googleing for it.
So pretty much what I have is this:
if ($('#resultProviders').scrollTop() >= $('#resultProviders').innerHeight()) {
$('#resultProviders').animate({ scrollTop: "0px" }, 800);
} else {
$('#resultProviders').animate({scrollTop: '+=30px'}, 500);
};
I have also provided a Fiddle for this.
https://jsfiddle.net/trinkermedia/ebhydbp3/5/
Many thanks.

I'd use a scroll function with a parameter, like shown in this fiddle.
function _scroll(goDown) {
goDown = goDown == undefined ? true: goDown;
var frame = $('#resultProviders'),
content = $('#resultProviders ul'),
scrollTo;
if (goDown) {
scrollTo = content.outerHeight() - frame.outerHeight();
} else {
scrollTo = 0
}
frame.animate({
scrollTop: scrollTo
}, {
duration: 2000,
complete: function() {_scroll(!goDown)}
});
}

Things are so simple with GSAP, here is your fiddle: jsFiddle.
JavaScript:
TweenMax.to('#resultProviders', 2, { scrollTo: { y: 'max' }, repeat: -1, yoyo: true, ease: Power2.easeInOut });
Apologies if this wasn't you were looking for or if you were not interested in solutions utilising anything else other than jQuery.

Velocity.js leaving text artefacts on fade out

I am struggling to see why this leaves slight text fragments at the top of where an element has had the HTML replaced and then faded back in. This is the code:
$('.current-station-services li').on('click', function() {
$(this).find('.status').velocity({
opacity: 0
},{
duration: 100,
complete: function() {
$(this).html(data.test);
$(this).velocity({
opacity: 1
})
}
});
});
Here is an image also of the output (artefact above the 'yo!'):

This is a browser issue, not Velocity. Feel free to submit a bug report to webkit/gecko.

Why the box disappear immediately?

I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.

Slide out and fade effect using jQuery and localScroll

I'm using localScroll to create a content slider. The problem is that I want to give a fade effect to the div that I'm sliding out, to make it fade before it disappears.
Does anyone have any idea how can I make this? I tried something with onBefore and onAfter but I didn't get what I expected.
Thanks!
LE: here is the code that I'm using:
$(document).ready(function() {
var localScroll = $('#slider .slideshow-wrapper')
var localSections = $('#slider .slideshow-wrapper ul.slideshow li');
var local = $('#slider ul.slideshow');
local.css('width', localSections[0].offsetWidth * localSections.length);
var localScrollOptions = {
target: localScroll,
items: localSections,
navigation: 'ul.tabs li a',
hash: 'false',
axis: 'xy',
duration: 500,
easing: 'swing'
//onAfter: fadeAway
};
$('.container').serialScroll(localScrollOptions);
$('ul.tabs').find('a span').click(selectNav);
});

You can't use fadeOut because it sets the div style to display:none and thus the div has a zero height and width making the scrollTo plugin mess up pretty bad. I would suggest using opacity. In the code below I set the minimum opacity to 0.2 because when I set it to zero, it was hard to tell the content was scrolling.
I took the LocalScroll Demo and made these modifications - it seems to work pretty well. I didn't try to match your code because I know the code below works with the demo and your question title says localScroll but your code uses serialScroll. Anyway, I'm guessing the ul.slideshow li in your code should be equivalent to the .sub in the code below.
$.localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue: false,
duration: 500,
hash: false,
easing: 'swing',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
$('.sub').animate({ opacity: 0.2 }, 250);
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
$(anchor).animate({ opacity: 1 }, 250);
}
});
Edit: I posted a demo at this pastebin

See: http://docs.jquery.com/Effects/queue