jquery - 使用滑动 jQuery 在悬停时显示/隐藏元素

Question

我遇到了一些困难，似乎找不到答案。

所以，我有一个名为 .accom-img 的图像类和一个名为 .accom-desc 的带有描述的 div 类。当我将鼠标悬停在 .accom-img 上时，我使用 slideUp() 隐藏它并显示 .accom-desc(隐藏在页面加载上但位于它们的正下方)仅使用 .show()。

当鼠标离开 .accom-desc 时，我希望图像向下滑动。除了鼠标离开 .accom-desc 时，我可以让一切正常工作。图像只是保持隐藏状态。

请帮我解决我做错的地方。谢谢!

       jQuery(document).ready(function() {
    	jQuery('.accom-desc').hide();

    	jQuery('.accom-img').hover(function() {
    		jQuery('.accom-img').slideUp();
    	}, function() {
          	jQuery('.accom-desc').show();
    	});

    	jQuery('.accom-desc').mouseleave(function() {
    		jQuery('.accom-img').slideDown();
    	}, function() {
            jQuery('.accom-desc').hide();
    	});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="accom-container">
  <div class="accom-desc"> 
    <h4>6 Sleeper House</h6> 
    <ul class="accom-ul"> 
      <li>2 x en-suite bedrooms each with a double bed with mosquito net.</li> 
      <li>2 x single beds with mosquito nets in the living area.</li> 
      <li>Fridge and chest freezer and fully fitted kitchen.</li> 
      <li>Television with DVD-player..bring lots of DVD's and own DSTV- decoder.(DSTV dish and connection available)</li> <li>Own private Jacuzzi</li> 
    </ul> 
  </div> 
</div>

Answer 1

可能是因为你的函数是同时运行的。你需要做这样的事情:

jQuery('.accom-desc').mouseleave(function() {
        jQuery('.accom-img').slideDown(1000, function() {
        jQuery('.accom-desc').hide();
    }));