Question

不要为什么我的jsfiddle不起作用

这是我的代码：

<div id="dentisterie">
    <div class="overlay">
        <div class="dentisterie-left"> <img src="img/dentisterie.png"> </div>
        <div class="dentisterie-right">
            <div class="dentisterie-right-container">
                <h2>DENTISTERIE</h2>
                <p>Le catalogue STONER regroupant toutes les références destinées aux cabinets dentaires. </p>
            </div>
        </div>
    </div>
</div>

 $('#dentisterie > .overlay').hover(function(){
    $(this).parent().toggleClass('overlayhover');
                $('.overlay').toggleClass('index');
                $('.dentisterie-right-container')
    .toggleClass('overlaytoggled')
    .animate({opacity: 1.0, right: '100px'}, 500)
    .mouseleave(function() {
    $('.dentisterie-right-container').css('right','-500');
  });              
})




.dentisterie-right-container {
    visibility: hidden;
    opacity: 0.0;
    position: relative;
    right:-500px;
}

.overlaytoggled {
    visibility: visible;  
}

.keepfaraway {
    position:relative;
    right:-500px;
}

在标题中：

<script type="text/javascript">
      $(document).ready(function() {
        $('.dentisterie-right-container')
          .css('display', 'block')
          .animate({opacity: 1.0, right: '-200px'}, 2000);
      });
    </script>

我希望在悬停时，.dentisterie-right-container从右侧滑动显示，鼠标离开时消失。

问题：我的容器在第一个悬停时滑动，但在鼠标离开时不会返回right:-500px;。因此，当我再次悬停时，不再有幻灯片效果。

我真的很想了解为什么/如何做到这一点因为我期待提高我的jquery技能

谢谢！

JQUERY问题mouseLeave - 滑动动画

0 个答案: