重置除当前悬停元素之外的所有其他jQuery动画
Reseting all other jQuery animations except for the current hovered element
所以我的代码有问题。它工作正常。但是我有三个盒子挨着。悬停时,它们会做一些事情。。。即改变宽度。我有问题。如果你把鼠标移到它们上面,它们就会全部启动。但我只想要你把鼠标停在上面的那个。
因此,当我将鼠标悬停在这些框上时,我需要重置所有其他动画,以阻止一次播放多个框的动画。谢谢
jquery
function animatedText() {
var $animatedTextBox = $('.animated-text');
var $animatedAnimation = $('.animated-text-animation');
$('.animated-text-content').css('display', 'none');
$animatedTextBox.on('mouseenter', function() {
$(this).find('.animated-text-animation').css('justify-content', 'flex-start');
$(this).find($('.animated-text-content')).delay(600).fadeIn(800);
});
$animatedTextBox.on('mouseleave', function() {
$(this).find('.animated-text-animation').css('justify-content', 'center');
$(this).find($('.animated-text-content')).fadeOut(250);
});
}
css
.animated-text {
min-width: 33.333%;
min-height: 700px;
display: flex;
align-items: center;
justify-content: center;
background-position: center;
background-size: cover;
transition: all 0.7s ease-in-out;
}
.animated-text-animation {
min-width: 50%;
min-height: 550px;
display: flex;
align-items: center;
justify-content: space-around;
background-color: rgba(0, 0, 0, 0.7);
transition: all 1s ease-in-out;
}
.animated-text:hover .animated-text-animation {
flex: 1 1 40%;
}
.animated-text:hover {
min-width: 50%;
}
.animated-text-container:hover .animated-text:not(:hover) {
min-width: 25%;
}
html
<div class="animated-text-container">
<div class="animated-text animated-text-1">
<div class="animated-text-animation">
<div class="animated-text-logo animated-text-logo-1"></div>
<div class="animated-text-content">
<h1>We will do all of the following for free for the first 30 days to prove our ability, our worth, and our character to you:</h1>
<li><span>Free Positioning Evaluation (Analyzing What you need to succeed)</span></li>
<li><span>Free Website Evaluation</span></li>
<li><span>Free Landing Page Evaluation</span></li>
<li><span>Free (entire) account set-up for a PPC Campaign on AdWords or Bing</span></li>
<li><span>Free Keyword List Building and Deployment</span></li>
<li><span>Free Ad Campaign Design and Implementation</span></li>
<li><span>Free Google Analytics Analysis and Evaluation</span></li>
<li><span>Free Phone Consultations to Discuss Your Account</span></li>
</div>
</div>
</div>
<div class="animated-text animated-text-2">
<div class="animated-text-animation">
<div class="animated-text-logo animated-text-logo-2"></div>
<div class="animated-text-content">
<h1>What we do NOT do for free:</h1>
<div class="li-container">
<div class="li-content">
<li><span>Website Development</span></li>
<li><span>Landing Page Redesign</span></li>
<li><span>Local Listing Management</span></li>
<li><span>Online Reputation Management</span></li>
<li><span>Audience Remarketing Campaigns</span></li>
</div>
<div class="li-content">
<li><span>Live Chat Services</span></li>
<li><span>Instant Email Alerts</span></li>
<li><span>Call Recording & Tracking</span></li>
<li><span>Website SEO Optimization</span></li>
</div>
</div>
</div>
</div>
</div>
<div class="animated-text animated-text-3">
<div class="animated-text-animation">
<div class="animated-text-logo animated-text-logo-3"></div>
<div class="animated-text-content">
<h1>It is our earnest goal to:</h1>
<div class="li-structure">
<li></li><span>Analyze the current position of your company in the market</span>
</div>
<div class="li-structure">
<li></li><span>Determine what tools and online campaigns you need to increase your sales and customer base</span>
</div>
<div class="li-structure">
<li></li><span>Formulate an effective plan to increase the growth of your company through increased customers</span>
</div>
<div class="li-structure">
<li></li><span>Effectively implement a cost effective advertising campaign to get the most out of every dollar spent</span>
</div>
<div class="li-structure">
<li></li><span>Build an ongoing and long lasting friendship based on mutual trust, respect, and performance</span>
</div>
</div>
</div>
</div>
</div>
</div>
您可以使用stopPropagation方法,这样就可以触发不止一个停止鼠标的方法。根据需要将延迟(500)调整到所需效果。
var time;
function animatedText() {
$('.animated-text-content').css('display', 'none');
$('.animated-text').on('mouseenter', function(e) {
if(time){
clearTimeout(time);
}
e.stopPropagation();
$(this).find('.animated-text-animation').css('justify-content', 'flex-start');
$(this).find($('.animated-text-content')).delay(600).fadeIn(800);
});
$('.animated-text').on('mouseleave', function(e) {
time = setTimeout($.proxy(function(){
$(this).find('.animated-text-animation').css('justify-content', 'center');
$(this).find($('.animated-text-content')).fadeOut(250);
}, this),500); //Delay <-------
});
}
相关文章:
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 对象获胜'如果qml中的其他地方定义了数字动画属性,则t设置动画
- jQuery悬停动画只在其他类似元素中的一个元素上
- 将列表项设置为负顶部的动画会使其他列表项下降
- 在页面加载的所有其他文件之后加载动画 gif
- 在单击时对元素进行动画处理,并在该元素和其他元素上单击鼠标输入/鼠标离开
- 单击图像,隐藏其他图像并使用JQUERY对图像滑动进行动画处理
- 在JavaScript中缓和动画,而无需jQuery或其他库
- jQuery:如果其他滚动函数,则进行动画处理
- 在 SVG 动画中围绕舞台原点以外的其他位置旋转路径
- 动画折叠移动其他元素
- 与其他变换函数异步制作不透明度动画
- jQuery动画在FF中运行良好,但在所有其他浏览器中效果不佳
- Jquery 鼠标悬停在与其他动画函数冲突的移动上
- Mozilla Firefox或除Chrome以外的其他浏览器的缩放动画
- 如何在调用window.open()时显示进度条或任何其他动画
- 我如何使那些由于附近的其他元素调用$. fadein()而移动的元素产生动画?
- 什么是最好的方式来创建饼状图和其他动画动态信息图形
- 防止.stop()停止其他动画
- 延迟动画,直到其他动画完成(滑动内容(