Question

我遇到了以下问题（测试版可用http://jsfiddle.net/qmP8R/2/）：

我有两个<div>包含两个版本的文本，第三个<div>用作“容器”。

在加载时，将使用缩短的文本填充容器。点击一个按钮，我想用一些动画（向上/向下滑动动画）改变长版本的短版本（反之亦然）（长短交换，短交换短 - 基本上是切换）。

在测试版中它的工作方式与预期相符，但我无法解决以下问题：

第一次点击时的动画不起作用（但文本更改为长版本）
在第二次点击时整个容器被滑动 - 不会恢复到初始状态

基本上我要实现的是一种切换行为，但是使用.text替换而不是显示：show / hide。

P.S。：在我的情况下，AJAX内容替换不是一种解决方案。

Answer 1

如何向上滑动文本，然后更改文本，然后将其向下滑动：

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;
    $("#popis_switch").click(function(){
        var full  = $("#popis_full").text(),
            short = $("#popis_short").text();
          if ( toggle_sw == true )
          {
              $("#popis").slideUp('slow', function () {
                  $(this).text(full).slideDown('slow');
              });
              toggle_sw = false;
          }
          else
          {
              $("#popis").slideUp('slow', function () {
                  $(this).text(short).slideDown('slow');
              });
              toggle_sw = true;
          }
    });
});

以下是演示：http://jsfiddle.net/qmP8R/11/

更新

由于文本没有改变，您可以通过在文档准备好时选择元素的文本来优化代码，而不是每次调用click事件处理程序时都这样做：

$(function(){
    var $popis    = $('#popis'),
        toggle_sw = true,
        full      = $("#popis_full").text(),
        short     = $("#popis_short").text();

    $popis.text(short);

    $("#popis_switch").click(function(){
          if ( toggle_sw ) {
              $popis.slideUp('slow', function () {
                  $(this).text(full).slideDown('slow');
              });
              toggle_sw = false;
          } else {
              $popis.slideUp('slow', function () {
                  $(this).text(short).slideDown('slow');
              });
              toggle_sw = true;
          }
    });
});

以下是优化版本的演示：http://jsfiddle.net/qmP8R/13/

此示例缓存了它可以执行的所有操作，因此不需要在click事件处理程序中进行任何计算。

Answer 2

结帐JSFiddle。我基本上删除了改变文本的所有逻辑。

有一个短div和一个长div。 short div包含第一部分，long div包含REST。然后你需要做的就是在长div上上下滑动而不改变任何文本。

Answer 3

在我看来，这样做的最好方法是只隐藏只有在你想要全文时才能显示的文本部分。这将节省所需数据的大小。

请参阅我的示例：http://jsfiddle.net/qmP8R/19/

javascript更简单，而且html也更少：

$(document).ready(function(){

    $("#popis_switch").on( 'click', function(){

        if ( $("#popis_full").is(':visible') )
        {
            $("#popis_full").slideUp('slow');
        }
        else
        {
            $("#popis_full").slideDown('slow');
        }
    });
});

Answer 4

滑动动画隐藏了切换。我编辑了脚本以删除动画，它显示切换按预期工作。如何拥有它，初始状态在那里但是被滑动隐藏起来。

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;

    $("#popis_switch").click(function(){
        var full = $("#popis_full").text();
        var short = $("#popis_short").text();

        if ( toggle_sw == true )          
            $("#popis").text(full).slideDown('slow');      
        else          
            $("#popis").text(short).slideUp('slow').slideDown('slow');

        toggle_sw = !toggle_sw;
    });
});

编辑：

更改jquery链中的顺序，我能够获得平滑的动画：

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;

    $("#popis_switch").click(function(){
        var full = $("#popis_full").text();
        var short = $("#popis_short").text();

        if ( toggle_sw == true )          
            $("#popis").slideUp('slow').text(full).slideDown('slow');      
        else          
            $("#popis").slideUp('slow').text(short).slideDown('slow');

        toggle_sw = !toggle_sw;
    });
});

或者：http://jsfiddle.net/qmP8R/24/

jquery .slideToggle（）＆amp; .text替换

4 个答案:

更新