slideDown悬停的新文字

Question

我正在寻找一些帮助jQuery。

我有一个覆盖层，左侧有10个按钮，右侧有描述文字。当我将鼠标悬停在按钮上时，说明文字会发生变化。到现在为止还挺好。

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

按钮

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

说明股利

<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."); 
    }); 
}); 

这不d任何事情。你可以帮帮我吗？ 亲切的问候！

Answer 1

您错误地在slideUp和slideDown之间。

首先更换了slideDown：

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

然后滑下您的新内容：

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

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

---

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

Answer 2

如果你想有一个文本“推”另一个文本，你至少需要使用2 div。

下面是一个例子：

$('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'); 
 
});

#left { 
 
    float: left; 
 
    width: 100px; 
 
} 
 

 
#right { 
 
    float : left; 
 
    width: 200px; 
 
} 
 

 
#right div { 
 
    display: none; 
 
}

<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>