我可以减慢这个Javascript函数的速度吗?
我不熟悉javascript和jquery,请原谅我的无知。我创建了一个网页,您可以在其中滚动文本链接,并在另一个div中更改图像。我使用了这里的方法:创建我的页面,效果很好 以下是我正在使用的代码:我可以减慢这个Javascript函数的速度吗?,javascript,jquery,Javascript,Jquery,我不熟悉javascript和jquery,请原谅我的无知。我创建了一个网页,您可以在其中滚动文本链接,并在另一个div中更改图像。我使用了这里的方法:创建我的页面,效果很好 以下是我正在使用的代码: $(document).ready(function () { $('.productmenu a').hover(function () { $('#prodimage img').attr('src', $(this).data('image-src'));
$(document).ready(function () {
$('.productmenu a').hover(function () {
$('#prodimage img').attr('src', $(this).data('image-src'));
$('.image-src').stop().animate({.attr}, slow);
});
});
我想在鼠标悬停时减慢从一个图像到另一个图像的转换,这样图像就不会像以前那样突然翻转
我使用本教程()创建了我喜欢的效果,但不知道如何将其与基于链接悬停的图像更改相结合。以下是来自jsfiddle.net的代码:
$(document).ready(function () {
$('.menu a').hover(function () {
$('#container img').attr('src', $(this).data('image-src'));
});
});
有人能告诉我正确的代码,以及如何将其添加到javascript中吗?我以前从未使用过jquery,所以我不知道如何添加动画函数
谢谢 试试这个:
您的HTML应该如下所示:
<div id="container" style="display:none;">
<img src="">
</div>
在转换过程中效果应该很好,请参见:下面是使用setTimeout的实现之一
var count = 0;
$(document).ready(function () {
$('.menu a').hover(function () {
var self = this;
var innerCount = ++count;
setTimeout(function(){
if(innerCount == count) //If mouse move out within 1 second, will not show new image
{
$('#container img').attr('src', $(self).data('image-src'));
}
}, 1000); //1 second delay
});
});
如果我告诉你,你根本不需要使用jQuery.animate来达到你想要的效果呢?使用!这里展示了如何完成你想要做的事情(我想)(我也把html/css/js放在了这篇文章的底部) 加载DOM内容后,
alignItems
函数确保所有图像都位于页面上的同一位置。脚本跟踪当前显示的图像。每次鼠标悬停在不同的链接上时,显示的图像都会更新,以便旧的当前图像将其不透明度设置为0,新的当前图像将其不透明度设置为1。然后CSS转换可以用来设置不透明度的动画,这会吹走$.fn.animate
,但只适用于现代浏览器(请参见…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>
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;
});
}
请注意,对于较旧的浏览器,此方法将优雅地降级,只是不会有任何动画。如果动画是绝对必要的,您可以随时使用jQuery的动画功能。为什么要使用
$(document.getElementById(oldImgId))
而不是$('#'+oldImgId)
?我总是尽可能将DOM元素传递给jQuery。它不必使用jQuery的Sizzle引擎,这可能是一个巨大的性能支柱。虽然Sizzle足够聪明,可以在选择器字符串是一个简单ID时绕过它的完整解析,但在您执行如此简单的操作时,根本没有理由初始化引擎,尤其是当它可能发生得像用户在不同元素上鼠标移动一样快时。事实上,我本想用普通的JS重写所有这些代码,但不想偏离原来的问题太多;人们直接滥用jQuery。这是一个很棒的库,功能非常强大,但我发现很多人都把它当作不必学习的借口。这在当时是有意义的,当时你必须处理IE,“它绕过了使用jQuery的Sizzle引擎,产生了更好的性能”应该已经足够了,谢谢。
.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;
}
$(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;
});
}