gpt4 book ai didi

jquery - 使用 jQuery 翻转插件在鼠标悬停时翻转 div

转载 作者:行者123 更新时间:2023-12-01 06:04:16 25 4
gpt4 key购买 nike

我使用的是jquery的flip插件。我需要在鼠标悬停时翻转 div 以及在鼠标移出时恢复翻转 div。我想翻转一张卡片(div),翻转完成后,立即恢复翻转。这是我尝试过的:

$(document).ready(function(){

$('.sponsorFlip').bind("click",function(){

// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

var elem = $(this);

// data('flipped') is a flag we set when we flip the element:

if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:

elem.revertFlip();

// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Setting the flag:
elem.data('flipped',true);
}
});});

有什么想法吗?

最佳答案

您可以尝试使用onEnd回调。

像这样:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
},
onEnd: function() {
elem.revertFlip();
}
});

看看这是否适合您。

关于jquery - 使用 jQuery 翻转插件在鼠标悬停时翻转 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8136703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com