我是 javascript 和 jquery 的新手,所以请原谅我的无知。我创建了一个网页,您可以在其中滚动文本链接,并且另一个 div 中的图像会发生变化。我使用了这里的方法:http://jsfiddle.net/fWpJz/1/创建我的页面并且效果很好。
这是我正在使用的代码:
$(document).ready(function () {
$('.productmenu a').hover(function () {
$('#prodimage img').attr('src', $(this).data('image-src'));
$('.image-src').stop().animate({.attr}, slow);
});
});
我想减慢鼠标悬停时从一张图像到另一张图像的过渡,以便图像不会突然翻转。
我使用本教程 ( http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/ ) 创建了我喜欢的效果,但不知道如何将其与基于链接悬停的图像更改结合起来。这是来自 jsfiddle.net 的代码:
$(document).ready(function () {
$('.menu a').hover(function () {
$('#container img').attr('src', $(this).data('image-src'));
});
});
任何人都可以向我指出正确的代码段以及如何将其添加到我的 JavaScript 中吗?我以前从未使用过jquery,所以我不知道如何添加动画功能。
谢谢!!
最佳答案
如果我告诉你你根本不需要使用 jQuery.animate 来达到你想要的效果怎么办?使用CSS3 transitions !这是 forked version of your fiddle展示如何完成您想要做的事情(我认为)(我也将 html/css/js 放在这篇文章的底部)。
加载 DOM 内容后,alignItems
函数可确保所有图像保持在页面上的同一位置。该脚本跟踪当前显示的图像。每次将鼠标悬停在不同的链接上时,显示的图像都会更新,以便旧的当前图像的不透明度设置为 0,新的当前图像的不透明度设置为 1。然后可以使用 CSS 过渡来设置不透明度的动画,它会击败 $.fn.animate
,但只能在现代浏览器上运行(参见 caniuse ...motherf***ing IE -_- )。代码如下:
html
<div class="menu">
<a href="#" data-image-id="1">link 1</a>
<a href="#" data-image-id="2">link 2</a>
<a href="#" data-image-id="3">link 3</a>
<a href="#" data-image-id="4">link 4</a>
<a href="#" data-image-id="5">link 5</a>
</div>
<div id="container">
<img id="1" src="http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg" />
<img id="2" src="http://farm1.staticflickr.com/13/15463218_8651d51b21_t.jpg"/>
<img id="3" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg" />
<img id="4" src="http://farm4.staticflickr.com/3036/2975303180_86c4858b2b_t.jpg" />
<img id="5" src="http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg" />
</div>
CSS
.menu a {
padding: 2px 4px;
color: #555;
text-decoration: none;
}
.menu a:hover {
color: #ddd;
background: #333;
}
#container {
margin-top: 10px;
}
#container img {
margin: 4px;
padding: 4px;
border: 1px dashed #aaa;
opacity: 0;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
javascript
$(document).ready(function () {
alignImages();
var currentImgId = 0;
$('.menu a').hover(function () {
var oldImgId = currentImgId;
currentImgId = this.dataset.imageId;
$(document.getElementById(oldImgId)).css('opacity', 0);
$(document.getElementById(currentImgId)).css('opacity', 1.0);
});
});
function alignImages() {
var $images = $('#container img');
var position = $images.eq(0).position();
$images.each(function() {
this.style.position = 'absolute';
this.left = position.left;
this.top = position.top;
});
}
关于javascript - 我可以减慢这个 Javascript 函数的速度吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19285778/