Javascript 如何使用JQuery使图像具有不透明度
我试图得到一个图像在一段时间内平滑地改变不透明度。这是我的密码Javascript 如何使用JQuery使图像具有不透明度,javascript,jquery,html,jquery-plugins,pulse,Javascript,Jquery,Html,Jquery Plugins,Pulse,我试图得到一个图像在一段时间内平滑地改变不透明度。这是我的密码 <script type="text/javascript"> pulsem(elementid){ var element = document.getElementById(elementid) jquery(element).pulse({opacity: [0,1]}, { duration: 100, // duration of EACH individual animation
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<a href="city.htm"><img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/></a>
pulsem(元素ID){
var element=document.getElementById(elementid)
jquery(元素).pulse({opacity:[0,1]},
{持续时间:100,//每个动画的持续时间
次数:3,//将通过脉冲阵列[0,1]三次
easing:'线性',//每个动画的easing函数
完成:函数()
})
另外,有没有一种方法可以在不需要鼠标盖的情况下自动执行此操作?谢谢。我假设您的代码是针对jQuery pulse插件的: 如果上面的代码不起作用,那么将“jquery”修复为“jquery” 要在页面加载时启动它,只需执行以下操作:
jQuery(function() {
jQuery('#yourImageId').pulse({
opacity: [0,1]
}, {
duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
alert("I'm done pulsing!");
}
});
给你的形象添加一个id,你就是金色的。
}); 要自动启动动画,请执行以下操作:
pulsate( $('#waterloo') );
修改代码以持续脉动(不确定这是否是您所追求的)-脉动效果被降级为它自己的函数,因此您可以直接或在事件处理程序中调用它
<script type="text/javascript">
$(function() { // on document ready
$('#waterloo').hover( //hover takes an over function and out function
function() {
var $img = $(this);
$img.data('over', true); //mark the element that we're over it
pulsate(this); //pulsate it
},
function() {
$(this).data('over', false); //marked as not over
});
});
function pulsate(element) {
jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
if( $(this).data('over') ){ // check if it's still over (out would have made this false)
pulsate(this); // still over, so pulsate again
}
}});
}
或
这可能就是你要找的
我个人会这样做,当鼠标悬停在图像上时会产生脉冲,然后在鼠标离开时返回到完全不透明度
$(document).ready(function () {
function Pulse(Target, State) {
//Every 750ms, fade between half and full opacity
$(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
}
$("#ImageId").hover(function () {
$(this).stop()
Pulse(this);
}, function () {
$(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
});
});
+1是的,“document.getElementById”不是jQuery的方式顺便说一句,他的图像的id是“滑铁卢”,嗯。这似乎不起作用。我引用js文件的方式正确吗?它们与htm文件位于同一文件夹中。@Alex否,jquery-1.4.2.js文件应位于所有内容之前。我不知道此处有注释。Josh是对的-在做其他事情之前先参考jquery-1.4.2.js。您可能希望将下面的一个答案标记为已接受的答案。
$('#waterloo').mouseover() // will fire a 'mouseover' event
$('#waterloo').trigger('mouseover');
$(document).ready(function () {
function Pulse(Target, State) {
//Every 750ms, fade between half and full opacity
$(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
}
$("#ImageId").hover(function () {
$(this).stop()
Pulse(this);
}, function () {
$(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
});
});