Question

我正在寻找jQuery的一些帮助。

我有一个覆盖层，左侧有10个按钮，右侧有描述文字。当我将鼠标悬停在按钮上时，描述文本会发生变化。到目前为止一切都很好。

我想要实现的是这些文本更改之间的转换。当用户将鼠标悬停在下一个按钮上时，我希望新文本从上方滑入并将旧文本推出（到底部）。

按钮

<a href="#" id="text1" class="myButton">Text1</a>

说明Div

<div id="description">
 <p id="descriptiontext">Hover over a category</p>
</div>

的jQuery

$("#text1").hover(function(){
$('#descriptiontext').slideDown('fast', function(){
    $('#descriptiontext').text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    });
});

这没有任何作用。你可以帮帮我吗？亲切的问候！

Answer 1

您在slideUp和slideDown之间犯了错误。

首先替换slideDown：

$('#descriptiontext').slideUp(...);

然后向下滑动新内容：

$('#descriptiontext').text("Lorem ... voluptua.").slideDown('fast');

演示：https://jsfiddle.net/Paf_Sebastien/red7ju7s/

无论如何，我认为你不应该使用jQuery处理你的文本（我的意思不是真正的文本内容）。尝试将所有描述放在内容中的div中并隐藏它们。使用jQuery选择文本并显示它。

Answer 2

如果你想要一个文字＆＃34;推送＆＃34;另一个文本，您需要使用至少2 div。

以下是一个例子：

＆＃13;

$('button').hover(function() {
  var $selected = $('div.selected'),
      id = 'text' + $(this).data('text');
  
  if ($selected.length && $selected.attr('id') == id) {
    return;  
  }
  
  // Hide the current text
  $selected.slideUp('slow').removeClass('selected');
  
  // Display the new text
  $('#' + id).slideDown('slow').addClass('selected');
});

＆＃13;

#left {
  float: left;
  width: 100px;
}

#right {
  float : left;
  width: 200px;
}

#right div {
  display: none;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <button data-text="1">Text 1</button>
  <button data-text="2">Text 2</button>
  <button data-text="3">Text 3</button>
  <button data-text="4">Text 4</button>
</div>
<div id="right">
  <div id="text1">Text 1 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
  
  <div id="text2">Text 2 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
  
  <div id="text3">Text 3 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
  
  <div id="text4">Text 4 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>

＆＃13;

通过悬停滑动新文本

2 个答案: