我正在尝试制作一个插件。 我的客户将有两个标志,两端有两个按钮,如果用户将鼠标悬停在左侧按钮上,则徽标将从右向左移动,如果悬停在右侧按钮上,徽标将从左向右移动(直到最后一个徽标)停止动画) 我可以通过下面的代码来做到这一点,但问题是,如果我再次悬停在按钮上,它会显示空白区域。 如果我们将鼠标悬停在显示空白区域的按钮上,则与之前的按钮相同的问题。
var kiu = $('#cont1').width();
var screenwidth = $(window).width();
var realwid = kiu - screenwidth;
$(".Nextb").hover(function () {
$('#contS').stop().animate({ 'margin-left': '-=' + realwid }, 4500);
}, function () {
$('#contS').stop().animate();
});
$(".Prevb").hover(function () {
$('#contS').stop().animate({ 'margin-left': '+=' + realwid }, 4500);
}, function () {
$('#contS').stop().animate();
})
HTML
<div class="cont">
<div id="cont1" class=" wow fadeInUp" data-wow-delay="0.5s">
<div class="NPrev">
<span class="Prevb"><i class="fa fa-angle-left"></i></span>
<span class="Nextb"><i class="fa fa-angle-right"></i></span>
</div>
<div class="kk">
<div class="ki kk1">
</div>
<div class="ki kk2">
</div>
</div>
<div id="contS" class="Img_cl1">
<div class="col-md-12 fdfll scroll-left">
<a target="_blank" href="http://www.meraevents.com/">
<div class=" cl1 hde ">
<img alt="client" src="img/clients/1.png" />
</div>
</a><a target="_blank" href="http://www.appvirality.com/">
<div class=" cl2 hde">
<img alt="client" src="img/clients/2.png" />
</div>
</a>
<style>
</style>
<a target="_blank" href="http://www.customfurnish.com/">
<div class=" cl3 hde ">
<img style="max-width: 120px !important; margin-top: 20px;" alt="client" src="img/clients/3.png" />
</div>
</a><a target="_blank" href="http://www.medplusmart.com/home.mart">
<div class=" cl4 hde ">
<img alt="client" src="img/clients/4.png" />
</div>
</a><a target="_blank" href="http://www.ishyd.org/">
<div class=" cl5 hde ">
<img alt="client" src="img/clients/5.png" />
</div>
</a><a target="_blank" href="http://www.stileeye.com/">
<div class=" cl6 hde ">
<img alt="client" src="img/clients/6.png" />
</div>
</a><a target="_blank" href="http://vuego.tv/index.html">
<div class=" cl7 hde ">
<img alt="client" src="img/clients/7.png" />
</div>
</a><a target="_blank" href="http://www.veooz.com/">
<div class=" cl8 hde ">
<img alt="client" src="img/clients/8.png" />
</div>
</a><a target="_blank" href="http://www.zapevent.com/">
<div class=" cl9 hde ">
<img alt="client" src="img/clients/9.png" />
</div>
</a><a target="_blank" href="https://www.doctrz.com/">
<div class=" cl10 hde ">
<img alt="client" src="img/clients/10.png" />
</div>
</a><a target="_blank" href="http://reveye.in/">
<div class=" cl11 hde ">
<img style="margin-top: 0px !important;" alt="client" src="img/clients/11.png" />
</div>
</a><a target="_blank" href="http://www.leonia.in/">
<div class=" hde cl12 ">
<img style="margin-top: 0px !important;" alt="client" src="img/clients/12.png" />
</div>
</a>
</div>
</div>
</div>
</div>
我附有输出图片请帮帮我。