gpt4 book ai didi

javascript - 使用 jQuery 在鼠标悬停时翻转面板

转载 作者:行者123 更新时间:2023-11-28 08:59:40 24 4
gpt4 key购买 nike

使用Flip!插件或 similar one ,我正在尝试创建一个简单的 div,它在鼠标悬停时翻转,并在鼠标离开时翻转回来。我创建了一个简单的概念验证网页,但我似乎无法让它工作。如果以最简单的方式实现(mouseenter:flip(),mouseleave:revertFlip()),当鼠标移动时,div会重复翻转。通过一些工作,我可以让它简单地工作,但是存在一个问题,如果您在动画完成之前将鼠标移开,它就会卡住。经过多次实验,我的代码看起来是这样的;

HTML:

<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="jquery.js"></script>
<script src='jquery-ui\jquery-1.9.1.js'></script>
<script src='jquery-ui\ui\jquery-ui.js'></script>
<script src='jquery.flip.js'> </script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="flipper"><div class="panel">Not flipped!</div></div>
</body>
</html>

CSS:

div {display:inline-block;}

.panel {
width: 200px;
height: 80px;
text-align: center;
color: white;
background-color: red;
padding-top: 20px;
padding-bottom:-20px;
}

.flipper{
border: 1px dashed blue;
}

javaScript:

$(document).ready(function(){
$('.flipper').mouseenter(function(){
console.log('--Mouse Entered--');
console.log('NOT flipped ' + !($(this).children().hasClass('flipped')));
console.log('NOT flip ' + !($(this).children().hasClass('flip')));
if (!($(this).children().hasClass('flipped')) && !($(this).children().hasClass('flip'))) {
console.log('If evaluated')
$(this).children().addClass('flip');
console.log('Added flip')
$(this).children().flip({
direction: 'lr',
content: 'Flipped!',
color: 'blue',
speed: 1000,
onEnd: function(){
console.log('Ended. Removed flip, added flipped');
$(this).children().removeClass('flip');
$(this).children().addClass('flipped');
console.log('Does it have flip ' + $(this).children().hasClass('flip'))
}
});
};
});
$('.flipper').mouseleave(function(){
console.log('--Mouse left--');
if ($(this).children().hasClass('flipped')) {
$(this).children().flip({
direction: 'rl',
content: 'Not flipped!',
color: 'red',
speed: 100
});
$(this).children().removeClass('flipped');
console.log('Removed flipped')
}

});
$('.flipper').click(function(){
console.log('DEBUG classes "' + $(this).children().attr('class') + '"');
});
});

目前,div 翻转一次,然后拒绝删除 'flip' 类,尽管它声称已经这样做了。
此时的我,很迷茫、很失落。我只是想让我的 div 翻转。请帮忙。

最佳答案

您必须使用JQuery Timing API在执行 mouseout 函数之前等待 mouseenter 函数完成。

或者你也可以这样做,等待 2 秒,让 mouseout 函数执行。

$('.flipper').mouseout(function(){
var t = setTimeout(function() {
console.log('--Mouse left--');
if ($('.flipper').children().hasClass('flipped')) {

$(this).children().flip({
direction: 'rl',
content: 'Not flipped!',
color: 'red',
speed: 100
});
$('.flipper').children().removeClass('flipped');
$('.flipper').children().removeClass('flip');
console.log('Removed flipped')
}
}, 2000);
});

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

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