我正在努力完成以下工作。
设置:
div 中溢出设置为隐藏的图像。
期望的效果:
当 div 悬停在上面时,图像应该在 div 内向上移动。
当图像顶部或底部与 div 的顶部或底部相遇时,图像应反转。
当鼠标离开 div 时,图像应该逐渐停止,而不是突然停止。
问题:
我找不到为页面上的多个元素使用间隔的方法,并且产生无限循环只是糟糕的编程。我似乎无法让图像正确地反转方向。
编码:
$(window).load(function(){
var posts = $(".post");
var post_images = $(".post > img");
var post_details = $(".job_focus");
var pan_scan = function(e){
event.stopPropagation();
var image = $(e.target);
var image_height = image.height();
var original_offset;
var first_run = "true";
var move_image = function(){
var fadeout = image.attr("fadeout");
var direction = image.attr("direction");
if (fadeout == "false"){
console.log("hover animation");
var image_offset = parseInt(image.css("top"));
var direction = image.attr("direction");
if (image_offset - 2 < -(image_height - 160)){
image.attr("direction", "+");
} else if (image_offset + 2 > -150){
image.attr("direction", "-");
};
image.animate({"top": direction + "=2px"}, 1, "linear");
} else if (fadeout == "true"){
console.log("fadeout animation");
if (first_run == "true") {
original_offset = image.offset().top;
if (direction == "-"){
var image_stop = original_offset - 20;
} else if (direction == "+") {
var image_stop = original_offset + 20;
};
first_run = "false";
};
current_offset = image.offset().top;
if (direction == "-"){
var image_difference = (current_offset - image_stop )/10;
console.log(image_stop);
console.log(current_offset);
console.log(image_difference);
} else if (direction == "+") {
var image_difference = (image_stop - current_offset)/10;
console.log("test");
} else {
console.log("direction failed");
console.log(image);
};
if (image_difference > 1){
image.animate({"top": direction + "=" + image_difference}, 1, "easeOutExpo");
} else {
image.stop(true, true);
image.attr({"fadeout": false, "animate": false});
first_run = "true";
};
}
var animate = image.attr("animate");
if (animate == "true") {
move_image();
} else {
image.attr("animate", true);
}
};
move_image();
};
var un_pan_scan = function(e){
var image = $(e.target);
image.attr("fadeout", true);
};
post_images.each(function(){
// Moves images to the center of the div, sets initial values for movement, and sets the mouseenter and mouseleave handlers
$(this).css({'top': -($(this).height()/2)}).attr({"direction": "-", "fadeout": "false", "animate": "true"}).hover(pan_scan, un_pan_scan);
});
});
有人可以帮我吗?我觉得我真的过于复杂了。