$('.imgc').hover(
function(e) {
$(this).effect("bounce", { times:5 }, "slow");
},
function(e) {
$(this).unbind('mouseenter');
});
I need to set an effect on the image. But I need this effect to work only at once. But then I need to bind again on mouseout. But it does not work.
('.imgc').bind('mouseenter', e);
How can I do this?
Try like
$('.imgc').on('hover', function(e) {
$(this).one(function () {
$(this).effect("bounce", { times:5 }, "slow");
});
$(this).off('mouseenter');
},
function(e) {
$(this).on('mouseenter');
});
You should try this,
$(".imgc").on({
mouseenter:function(){
$(this).effect("bounce", { times:5 }, "slow");
},
mouseleave:function(){
}
});
hover is basically a pseudoevent, which maps to mouseenter and mouseleave.
Related
I am trying to refactor my code and decided to re-implement my on events by mapping
Here's what i have:
$('img#sorc').on({
mousemove: function (e) {
alert('test in');
}
}, {
mouseleave: function () {
alert('test out');
}
});
Now mouseleave won't work.
I checked my code x10 and stared at it for so long, what did i miss?
You have additional }, { remove it with ,
$('img#sorc').on({
mousemove: function(e) {
alert('test in');
},
mouseleave: function() {
alert('test out');
}
});
I have an sliding image and I have a problem it it. If you do fast mouseover over the images multiple times and then you get the mouse outside pics it still animates. Somehow it records and plays the animation even after you are not with mouse over it.
Here is my code and link to check it:
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
add .stop()
function () {
$(this).find('#hoverpic').stop().animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({ "top": "+=330px" }, "normal" );
});
if .stop() doesn't work well enough
you can try with .stop(true) or .stop(true, true)
http://api.jquery.com/stop
you should put a check for
if( $(elem).is(':animated') ) {...}
in your code.
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
if($(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
I usually add a class while it's animating.
Something like this:
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).hasClass('animate')) {
$(this).addClass('animate');
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
}
},
function () {
if($(this).hasClass('animate')) {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal", function() { $(this).removeClass('animate'); } );
}
});
});
You need to make a simple change (see commented code) if you want to avoid the jumping image when hovering out before the animation finishes:
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').stop().animate(
{ "top": "0px" } //WAS -=330px
, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({
"top": "330px" //WAS +=330px
}, "normal" );
});
I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....
You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
It's supposed to toggle between the functions when '#drop a' is clicked. What's the deal?
$(document).ready(function() {
$('#drop a').toggle(function() {
$('body').animate({'margin-top': '300px'}, 600);
setTimeout(function() {
$('#drop a').css('background-position', '-40px 0px');
}, 1000);
}, function() {
$('body').animate('margin-top': '80px'}, 600);
});
});
Seems that you forgot the starting bracket:
// ---------------v
$('body').animate({'margin-top': '80px'}, 600);
which should definitely cause the fatal error.
I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)
I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?
This is what I'm trying now:
$(document).ready(function(){
//top-menu highlight link
$(".photos").removeClass().addClass("active");
$("a.fancybox").fancybox({
'overlayShow' : true,
'0opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){ $("body").css('overflow','hidden');},
'onComplete': function(){ $("body").css('overflow','auto');}
});
});
I was also trying to get onStart working...
I got fancybox v2.1.5, but when I do a search on 'onStart' in the javascript file it's not found. When I searched for '.trigger' I found: 'beforeLoad'
Maybe this could help someone out, in my case this is what I needed :)
I also saw there was an 'onReady' triggered somewhere which can be used instead of the 'onComplete' I guess!
P.S. I used it like this
$("a.popup").fancybox({
beforeLoad: function() {
return window.confirm('Continue?');
}
});
FancyBox < version 2
FROM EXAMPLE (fancybox.net):
$("#various7").fancybox({
onStart: function() {
return window.confirm('Continue?');
},
onCancel: function() {
alert('Canceled!');
},
onComplete: function() {
alert('Completed!');
},
onCleanup: function() {
return window.confirm('Close?');
},
onClosed: function() {
alert('Closed!');
}
});
EDIT: 06-2015
FancyBox >= version 2
FROM EXAMPLE (fancyapps.com):
$("#various7").fancybox({
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
Notice that the callback methods are different in fancybox2. It uses beforeLoad, afterShow, etc. Please consult fancybox2's documentation here.
Try this:
$(document).ready(function(){
$("a.fancybox").fancybox({
'overlayShow' : true,
'opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){
$("body").css('overflow','hidden');
},
'onCleanup': function(){
$("body").css('overflow','auto');
}
});
});
fancybox onStart onComplete status not working working with jquery 1.9.1 try jquery 1.6.4.