Question

尝试实现此目的：我有多个标题，每个标题都有不同的文本。当我将鼠标悬停在一个标题上时，文本会相应地更改（每个标题的所有文本都不同），并带有“幻灯片”动画。

我已经达到悬停工作正常的程度，但是当我尝试添加一个简单的过渡时，功能会中断。

HTML code：

<h1 id="mainText1">Header 1.</h1><span class="mainText1">Text 1.</span>
<h1 id="mainText2">Header 2.</h1><span class="mainText2">Text 2.</span>
<h1 id="mainText3">Header 3.</h1><span class="mainText3">Text 3.</span>
<h1 id="mainText4">Header 4.</h1><span class="mainText4">Text 4.</span>

跨度目前设置为display：none;在CSS。

JQuery的：

$(document).ready(function() {
    $("h1").hover(function(evt) {
        evt.preventDefault();
        var id = $(this).attr('id');
        var toShow = $("." + id);
        $(this).hide();
        $(toShow).show();
    }, function () {
        var id2 = $(this).attr('id');
        var toHide = $("." + id2);
        $(this).show();
        $(toHide).hide();
    });
});

如果第7行中的'slow'被删除，它可以正常工作。我也尝试过像......

$(toShow).show().slideDown('slow');

..但也没有运气。我也在寻找更清洁的解决方案而不是发布的解决方案。我的jQuery太基础了，无法弄清楚这是否可以通过其他方式更好地完成。提前谢谢！

编辑：我认为我没有说清楚，因为我看到了类似的解决方案。 h1必须在悬停时消失。我更新了JS代码。这段代码按照我的意图运行，但它不包含“幻灯片”动画。当我尝试将代码放入幻灯片时（如.slideDown（'show'），它不能按预期工作）。有没有办法做到这一点？

更新了小提琴：http://jsfiddle.net/yvLs5/ 之前的小提琴：http://jsfiddle.net/8rnuE/1/（我尝试放'慢'）和功能中断。

Answer 1

好的 - 在slideDown调用中删除'slow'关键字的原因是它会立即转换。当您添加slow关键字时，它会使幻灯片花费时间 - 但是，javascript不会等到转换，然后再转到下一行。所以，'slideDown'仍在进行中，而'show'正在发生，这使得布局遍布整个地方。

您遇到的另一个问题是您的“悬停”事件仅在“h1”上 - 这意味着如果用户将鼠标悬停在悬停所显示的文本上，则会取消悬停，然后隐藏文本。 ..将h1拉回到光标下方，因此事件再次触发，等等......

以下是另一种解决方案：http://codepen.io/anon/pen/jGDIt

我不会使用javascript - 我只会使用CSS。首先，您需要更改HTML的结构，以便h1和显示的文本是包含元素内的兄弟（我使用<div class="toggle-section">，但您可能想使用{ {1}}或其他一些块元素）：

<section>

然后，设置CSS以便在容器上触发悬停，如下所示：

<div class="toggle-section">
  <h1>Heading 1</h1>
  <p class="main-text">Main text 1</p>
</div>
<div class="toggle-section">
  <h1>Heading 2</h1>
  <p class="main-text">Main text 2</p>
</div>
<div class="toggle-section">
  <h1>Heading 3</h1>
  <p class="main-text">Main text 3</p>
</div>
<div class="toggle-section">
  <h1>Heading 4</h1>
  <p class="main-text">Main text 4</p>
</div>

这是基本的显示/隐藏行为，不需要javascript。如果你想要过渡，你也可以这样做，只要你事先知道'主文字'的高度。如果您这样做，请将CSS更改为：

.toggle-section .main-text {
  display: none;
}

.toggle-section:hover h1,
.toggle-section:focus h1 {
  display: none;
}

.toggle-section:hover .main-text,
.toggle-section:focus .main-text {
  display: block;
}

然后，当您悬停/聚焦元素时，主文本的高度将在400毫秒内扩展到1.2em。

这样做有一些好处：

它可以在没有javascript的情况下运行 - 如果你还在，它会特别方便从javascript / jQuery开始：如果你意外地破坏了某些东西，你的切换仍然有效。
速度更快：您的CSS通常会在您的Javascript开启之前就绪你的网页。
它更整洁 - 它不会将显示内容混合到您的Javascript中。

使用这样的设置要注意的一件事：Hover不适用于手机或触控设备（无论您是否触摸屏幕）。您应该为这些设备提供另一种选择。

Answer 2

你正在寻找这个。

<强> HTML

<div class="topic">
  <h1 id="mainText1">Header 1.</h1>
  <span class="mainText1">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText2">Header 2.</h1>
  <span class="mainText2">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText3">Header 3.</h1>
  <span class="mainText3">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText4">Header 4.</h1>
  <span class="mainText4">Text 1.</span></div>

<强> CSS

span {display:none;}
h1{background:yellow;margin:0;}

<强>脚本

$('.topic').mouseenter(function(){
    $('.topic').find('span.'+$(this).find('h1').attr('id')).show();
    $(this).find('h1').hide();
}).mouseleave(function(){
    $('.topic').find('span.'+$(this).find('h1').attr('id')).hide();
    $(this).find('h1').show();
});

Fiddle Demo

Answer 3

如果你没有隐藏H1它可以工作

http://jsfiddle.net/j5J4F/

$(document).ready(function() {
    $("h1").hover(function(evt) {
        evt.preventDefault();
        var id = $(this).attr('id');
        var toShow = $("." + id);
        $(toShow).show('slow');
    }, function () {
         var id2 = $(this).attr('id');
        var toHide = $("." + id2);
        $(toHide).hide();
    });
});

浏览器正在进入一个泡菜，因为当它悬停在H1上时它会隐藏h1，触发鼠标移出事件，然后再次显示H1并隐藏跨度。

注意 - span应该被块级元素（例如p）替换为语义正确。

Answer 4

主要问题来自你隐藏悬停的元素。这是隐藏元素的一段代码。

<h1 id="mainText1">
    <span class="mainText1_main">Header 1.</span>
    <span class="mainText1">Text 1.</span>
</h1>

function(evt) {
    evt.preventDefault();
    var id = $(this).attr('id');
    var toHide = $("." + id + "_main");
    var toShow = $("." + id);
    $(toHide).hide();
    $(toShow).show('slow');
}

使用转换jQuery更改悬停时的文本

4 个答案: