Question

我有一个小问题，说实话，我是JS的新手。

在stackoverflow中的好人帮助下，我已经设法做到了：

a href="JavaScript:;"onmouseover="showIt('logo1')"onmouseout="hideIt('logo1')"

img style="border:2px solid #fff;margin:-2px;" src="images/clients/1.jpg" 

onmouseover="this.src='images/clients/1a.jpg'" 

onmouseout="this.src='images/clients/1.jpg'"

接下来是：

div id="logo1" style="display:none;"

JS：我在这个网站上发现它的完美工作是：

lastone = 'empty';

function showIt(lyr) {
    if (lastone != 'empty') lastone.style.display = 'none';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'block';

}

function hideIt(lyr) {
    if (lastone != 'empty') lastone.style.display = 'block';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'none';
}`

我有25个这样的标识。现在一切都很棒。但是如何使过渡更顺畅。不要出现和消失。

提前感谢所有帮助。

Answer 1

尝试使用.fadeIn() / .fadeOut()来实现您的目标，

function showIt(lyr) {
  $("#"+lyr).stop().fadeIn("slow");
}

function hideIt(lyr) {
  $("#"+lyr).stop().fadeOut("slow");
}

Answer 2

切换显示始终显示/隐藏元素而不进行转换。有很多方法可以达到你想要的效果。

您已使用“jQuery”对此进行了标记：尝试使用$.fadeIn()和$.fadeOut()。

您还可以通过在要显示/隐藏的元素上应用/删除类来使用CSS3 transitions。

Answer 3

你也可以通过给出时间来实现这一点：

d3.select('#toggle')
    .on("click", function(d){
      var o = d3.select('.fade_rectangle').style('opacity') === "1" ? "0" : "1";
      d3.selectAll('.dot')
        .style('opacity', o);
      d3.selectAll('.fade_rectangle')
        .style('opacity', o);
    });

Answer 4

您可以查看以下链接。

Fiddle

$("#toggle3, #toggle4").click(function() {
$(this).next(".toggle").slideToggle("slow");

}）;

显示/隐藏具有慢效果的多个Div

4 个答案: