如何在未滑動填充的情況下將我的div滑動到懸停上？

我一直在尋找關於如何滑下某個div的小時，但似乎沒有解決問題。我在這裏試圖做的是滑下.permalink，當您將#entry和#entry放在它下面滑動時。該腳本以前工作，但它所做的只是向下滑動填充和它下面的#entry不。如何在未滑動填充的情況下將我的div滑動到懸停上？

這裏的JS：

$(document).ready(function() { 
$("#entry").mouseover(function() { 
    $(".permalink").stop().slideDown("slow"); 
}); 
$("#entry").mouseout(function() { 
    $(".permalink").slideUp("slow"); 
});});

Fiddle

這將會是真棒，如果你們能幫助我與此有關。謝謝！編號：這是我的blog的鏈接。我在裏面貼了一些照片，這樣你就會知道我正在努力做些什麼。我正在使用@Csdtesting發佈的代碼。它在小提琴上工作，但不在我的博客上。

來源

2014-09-24 Ely

題外話：你有相同ID的多個元素。這是無效的HTML。 – isherwood 2014-09-24 18:07:11

改爲使用.mouseenter和.mouseleave！

$(document).ready(function() { 
$(".photo").mouseenter(function() { 
     $(this).find('.permalink').stop().slideDown("slow"); 
    }).mouseleave(function() { 
     $(".permalink").slideUp("slow"); 
    }); 
});

http://jsfiddle.net/csdtesting/umws6nrk/9//

來源

2014-09-24 18:05:12

這並不能解決OP的問題。 – isherwood 2014-09-24 18:08:43

看到小提琴plz。舊的實施只是沒有work.My版作品...！ @Ely幫助我！ – 2014-09-24 18:09:59

它們在Chrome中都以相同的方式工作。重新仔細閱讀這個問題。你的演示會推下第二行，這是問題所在。 – isherwood 2014-09-24 18:16:09

您可以動畫填充或保證金，以配合您的永久鏈接元素的高度：

.entry { 
    ... 
    margin-bottom: 18px; 
} 

$(".entry").mouseover(function() { 
    $(this).find(".permalink").stop().slideDown("slow"); 
    $(this).stop().animate({ 
     'margin-bottom': '0' 
    }, 'slow'); 
}); 
$(".entry").mouseout(function() { 
    $(this).find(".permalink").stop().slideUp("slow"); 
    $(this).stop().animate({ 
     'margin-bottom': '18' 
    }, 'slow'); 
});

Demo

有一個1像素抽搐在我的演示，可能由於高度四捨五入的特點。不過，我現在已經沒時間了。

來源

2014-09-24 18:18:02 isherwood

你好，謝謝你的回答！代碼雖然不適用於我，但我不知道爲什麼。我在我的博客上嘗試過，但它不起作用。 – Ely 2014-09-25 00:46:15

你的代碼存在一些錯誤......如果我理解正確，你的主要問題的答案是永久鏈接在.photo的div元素中。因此，當固定鏈接向下滑動時，其容器（.photo）也必須擴展以騰出空間。將.photo div之外的永久鏈接移動。

fiddle

<div id="entry"> 
     <div class="photo"> 
      <img src="https://38.media.tumblr.com/358b80be4c70049645ce41fdc3a664bf/tumblr_mz4c7ymrJJ1rb40pco1_500.gif"> 

     </div> 
      <div class="permalink"><a class="link" href="">PERMALINK</a> 

      </div> 
    </div>

此外，你應該使用的mouseenter和它上面所說的，以減輕鼠標懸停的「跳動」鼠標離開。在jQuery.com上查看它們，看看有什麼不同。

最後，你應該每頁只有一個唯一的ID。使用ID = #entry元素的所有四張照片都是爲什麼當您展開第一張照片時，所有四個固定鏈接都向下滑動，並且該功能在其餘三張照片上不起作用。

編輯：

好吧我想我現在明白了這個問題。伊舍伍德有正確的想法。雖然你不需要任何額外的動畫。由於沒有固定鏈接的空間，它推動第二行，所以當然需要推動它。所有你需要做的是爲從頭開始的固定鏈接添加一些空間。最簡單的方法是將高度分配給#entry元素。

new fiddle

來源

2014-09-24 18:23:10 sn3ll

所有的優點，但最初的問題沒有解決。 – isherwood 2014-09-24 18:24:43

然後我不明白你的問題，請澄清 – sn3ll 2014-09-24 18:37:09

我想我現在明白了...查看編輯 – sn3ll 2014-09-24 18:53:29

如何在未滑動填充的情況下將我的div滑動到懸停上？

回答

相關問題