I have the following JQuery which works on initial page load:
$(window).on('load', function(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
});
Now that I have added pagination and filters to the page, the window onload obviously won't work once any pagination or filters have been triggered. I understand that I need to create an additional function to ensure the above will still work, however I believe that there is something not write with my code, as when pagination is used, I am still getting no jquery. I am using the correct approach?
This is what I have so far:
document.onreadystatechange = function(){
if (document.readyState === "complete") {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
}
else {
window.onload = function () {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
};
};
}
I am still learning.
Created a function (partA), and then triggered function when required (partB)
// PART A
function cardFunction(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 300);
});
}
// PART B
jQuery(document).ready(function () {
cardFunction();
});
Related
For this animation I use velocity.js and here is the code
$(document).ready(function() {
$('.shrink').on('click', function() {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
$('.spread').on('click', function() {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
});
});
and the jsfiddle with full animation preview.
So, when you click on some column it opens and click again it closes. That is how it is supposed to work. But, the problem is if you now click again on the same column, it will open and close immediately, which is not the effect I want.
How can I fix this?
Btw, not sure why, but currently is not working in chrome, but it works in ff.
Learn about event delegation
simple rewrite of your code becomes
$(document).ready(function () {
$('body').on('click', '.spread', function () {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
$('body').on('click', '.shrink', function () {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
});
});
DEMO
Hello im creating an iframe in my javascript. However the style and the loaded event doesnt seem to work. What am I doing wrong?
var iframe = $("<iframe src='/Player/ShowPage/"+data.PageId+"'/>", {
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
I must be missing something, I just cant figure out what it is. The iframe is just sitting there - mocking me - on the screen...
You just need to move the 'src' into the object literal and everything works fine.
var iframe = $("<iframe>", {
src: '/Player/ShowPage/' + data.PageId,
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
Please check this JSFIDDLE for a working demo.
I have some DIVs for products, and I have:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperContentVisible').animate({
height: '100px',
opacity: '1',
}, function(){
$(this).find('.productWrapperPrice').fadeIn();
$(this).find('.productWrapperByCompany').fadeIn();
});
});
// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperPrice').fadeOut('fast');
$(this).find('.productWrapperByCompany').fadeOut('fast');
$(this).find('.productWrapperContentVisible').animate({
height: '40px',
opacity: '.8',
});
});
and there are about 20 of products in each page, while I'm using stop(true,true), after I move my mouse on many of them many times, this doesn't work right, they continue to change height, and sometimes productWrapperPrice is still there while I don't have my mouse over there, it should go hidden.. .
sample: http://jsfiddle.net/gwsPB/
What's wrong with my code?
Thanks
Try this:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, false).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, false).animate({
height: '40px',
opacity: '.8'
});
});
DEMO
The problem is: when you mouseenter and mouseleave immediately fast enough, your animate function in the mouseenter event is not finished yet. When your call $this.find('.productWrapperContentVisible').stop(true, true), the animation is stopped but the callback function is called which display them again
function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany')
.stop(true, true).fadeIn();
}
By using stop(true, false), the callbacks are not called.
You need to call stop() on elements where are being animated, calling it on an ancestor element has no effect.
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, true).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, true).animate({
height: '40px',
opacity: '.8'
});
});
I've been having some difficulties, could someone point me in the right direction for this fiddle?
I need the div to animate on hover, but only when the .isDown class has been added to a different element by the click function.
Fiddle
$(".move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
//can put hover in here????
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
return false;
});
if ($(".move").hasClass("isDown")){
$(".funnyMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
Use the same condition inside the hover function. You are only binding the event in DOM ready based on the condition. So the event is never bound as the condition is false to start with.
$(".fuckerMOVE").hover(
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "10px"
}, 215);
}
},
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "0px"
}, 230);
}
});
Check Fiddle
Here is working code:
I removed your code outside of the .move click and put this in it:
$(".fuckerMOVE").hover(function () {
$(this).stop().animate({
top: "10px"
}, 215);
},
function () {
$(this).stop().animate({
top: "0px"
}, 230);
});
Fiddle
The problem was that if ($(".move").hasClass("isDown")){ was reached on document load, where this would have been false. My solution was just to apply the hover bind on the element directly when you are wanting it to be bound.
I actually just realized it looks like you were wanting to remove the bind if the .move is clicked again. If this is the case, you can move your bind into your else block and then add this to the if block:
$(".fuckerMOVE").off("mouseenter mouseleave");
The reason for mouseenter and mouseleave is that behind the scenes hover() sets listeners for these events.
Fiddle
not sure if this is what you want.
http://jsfiddle.net/hvLA6/
$("#move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ){
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
if ($("#move").hasClass("isDown")){
$(".fuckerMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
return false;
});
CSS
div {
width:100%;
height:100px;
background:black;
position:relative;
}
#move {
font-size:20px;
background:pink;
}
after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.