I want to bump up a li on hover and let it get to original state when the mouse leaves. This works but does the hover animat(up) another time when the mouse is leaving which gives me a delay and inefficient code. Do you guys have some suggestions for me to make this more efficient?
function HoverListItem() {
var menuItem = $('#menu > li')
menuItem.on('hover', function(){
console.log('up');
$(this).animate({
'marginTop': '-10px'
}, 150);
});
menuItem.on('mouseleave', function(){
console.log('down');
$(this).animate({
'marginTop': '0px'
}, 150);
})
};
This is because the animations are queued, clear the queue before issuing a new animation. I myself also prefer using hover() to register mouseenter and mouseleave.
$("#menu > li")
.css("position", "relative")
.hover(
function() {
$(this).clearQueue().animate({
bottom: 10
});
},
function() {
$(this).clearQueue().animate({
bottom: 0
});
}
Example: http://jsfiddle.net/6xXGw/
Related
I have the following javascript object controlling my slider:
Slider = {
slideWrap: "#slider ul",
slide: "#slider ul li",
prevTrigger: "#slider a.prev",
nextTrigger: "#slider a.next",
control: "#slider a.control",
init: function() {
jQuery(this.nextTrigger).click(this.moveRight.bind(this));
jQuery(this.prevTrigger).click(this.moveLeft.bind(this));
},
moveRight: function(e) {
e.preventDefault();
jQuery(this.slideWrap).removeClass("no-transition");
jQuery(this.slide).first().clone().appendTo(this.slideWrap);
jQuery(this.slideWrap).css("marginLeft", "-100vw");
jQuery(this.control).css("pointer-events", "none");
setTimeout(function(){
jQuery("#slider ul").addClass("no-transition");
jQuery("#slider ul li").first().remove();
jQuery("#slider ul").css("marginLeft", "0px");
jQuery("a.control").css("pointer-events", "auto");
}, 500);
},
moveLeft: function(e) {
e.preventDefault();
jQuery(this.slideWrap).removeClass("no-transition");
jQuery(this.slide).last().clone().prependTo(this.slideWrap);
jQuery(this.slideWrap).css("marginLeft", "100vw");
setTimeout(function(){
jQuery('#slider ul').addClass('no-transition');
jQuery('#slider ul li').last().remove();
jQuery('#slider ul').css("marginLeft", "0px");
jQuery('a.control').css('pointer-events', 'auto');
}, 500);
}
}
Moving to the right works great as the slider slides to the right, clones the first slide, appends it to the end of the slider and then removes the original first slide in the timeout function. However, I have an issue with sliding left as the last slide needs to be prepending before the slider moves.
See my fiddle here...https://jsfiddle.net/f2hb68tn/12/
You can try this jsfiddle: https://jsfiddle.net/f2hb68tn/22/.
Here is the modified code:
moveLeft: function(e) {
e.preventDefault();
jQuery(this.slideWrap).addClass('no-transition');
jQuery(this.slide).last().clone().prependTo(this.slideWrap); // Prepend last slide
var ctlWidth = "-" + jQuery("#slider").width() + "px"; // In pixels for IE11
jQuery(this.slideWrap).css("marginLeft", ctlWidth); // Stay on current slide
jQuery(this.control).css("pointer-events", "none");
setTimeout(function () {
jQuery('#slider ul').removeClass("no-transition");
jQuery('#slider ul').css("marginLeft", "0px"); // Transition to first slide
}, 10); // Zero ms does not work well in Firefox
setTimeout(function(){
jQuery('#slider ul').addClass('no-transition');
jQuery('#slider ul li').last().remove(); // Remove last slide
jQuery('a.control').css('pointer-events', 'auto');
}, 500);
}
In IE11 (and maybe other versions of IE), ctlWidth must be given in pixels (e.g. "-524px"). If you don't need to support that browser, you can use "-100vw" instead.
If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity.
I want that it will take only one event for animation during animation times; even when multiple event triggered.
Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").animate({
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").animate({
width: "100%",
}, 900);
$(this).text("Show More");
});
});
Here's an JSFiddle to show you the behaviour
You need to use .stop()
Stop the currently-running animation on the matched elements.
Use
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").stop().animate({ //Here used stop
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").stop().animate({ //Here used stop
width: "100%",
}, 900);
$(this).text("Show More");
});
});
DEMO
Yes every time because you have some duration for example
$('somelemenent').animate({}, 400);
Your animation will stay in order if you hover element more quickly than your duration.
For this cases, you should set:
$('somelement').stop().animate(/* and your properties */);
Method .stop() stops all effects and orders which have connection with current element.
Use this : add another event after finishing previous one.
$(document).ready(function(){
$("button").mouseover(function() {
$( this ).css({background :'transparent',color : '#09F'});
$( "button").stop().animate({width: "110%",}, 900 );
$(this).text("Show More >");
}).mouseout(function() {
$( this ).css({background :'#09F',color : '#FFF'});
$( "button").stop().animate({width: "100%",}, 900 );
$(this).text("Show More");
});
});
I have a tooltip that can be seen below, at the moment it reveals the tooltip only on hover, but I want it to reveal the tooltip when both hovering and clicking (for touch screen devices) could somebody please show me how?
My JSFiddle
My javascript code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
You can create a function, let's call it activate:
function activate(that) {
//Your code here
}
and then use it like this:
$("ul.thumb li").hover(function() {
activate($(this));
});
$("ul.thumb li").click(function() {
activate($(this));
});
Note, that activate will hold the commands you need to process in those events. Also, in activate, try to make sure that you are using that instead of this.
First, refactor and rename your hover in and out function:
function showTooltip(){
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
// etc...
}
function hideTooltip(){
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
// etc...
}
Then instead of using the hover shorthand, use the mouseenter and mouseleave events to listen the hovering:
$("ul.thumb li")
.on('mouseenter', showTooltip)
.on('mouseleave', hideTooltip);
If you want to show the tooltip for touch events, just add the touchstart event to it: I guess you want to tap to both open and close the tooltip.
$("ul.thumb li")
.on('mouseenter touchstart', showTooltip)
.on('mouseleave touchstart', hideTooltip);
You can use jQuery .on() method to bind a handler to multiple events...
First of you need to name the two functions. Then you can use .on() as follows:
$("ul.thumb li").on('mouseover touchstart', show);
$("ul.thumb li").on('mouseleave touchend', hide);
Updated JSFiddle
I'm trying to get a nice animation with jQuery. I came up with that code:
$(document).ready(function () {
$('#arrow_up').hide();
$('#arrow_down').bind({
mouseenter: function() {
$('#content')
.animate({
height: '110px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '100px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '300px'},
500);
$('#arrow_up')
.delay(1000)
.fadeIn( 2000 );
});
$('#arrow_up').bind({
mouseenter: function() {
$('#content')
.animate({
height: '290px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '300px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '100px'},
500);
$('#arrow_down')
.delay(1000)
.fadeIn( 2000 );
});
});
It is working nicely, but only the first time. You can check it here: http://www.cow-art.eu/test/index.html
I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.
I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.
I ran out of ideas how to fix it. Can you please help me with that one?
The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});
Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.
The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE