2

こんにちは私は次のHTMLを持っています：

<span class="slide1"><a href="#" class="slide1">Behavior</a></span>
<div id="second" class="content1">I’m not a good</div>

そして次のjquery：

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').slideToggle(800);
        return false;
    });
});

非表示のdivを切り替えて、左側から表示するにはどうすればよいですか？

つまり、要素をクリックすると、スパン要素の左側にdivが表示されます。

これが私がこれまでに持っているものです：

http://jsfiddle.net/gVjFs/70/

4

6 に答える 6

3

これを行うには2つの方法があります。1つはjQueryUIも必要とし、もう1つはjQueryのみを使用します。

jQuery UIなし：

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').animate({width:'toggle'},800);;
         return false;
     });
});

jsFiddleの例。この例では、.animate（）を使用して幅を変更します。

jQueryUIを使用

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').show("slide", { direction: "left" }, 800);
         return false;
     });
});

jsFiddleの例。この例では、jQueryUIのエフェクトメソッドを使用しています。

于 2013-02-07T13:57:06.950 に答える
1

これを行うには、CSSスタイルが必要だと思います。

.slide1 {
    display:inline-block;
}
.content1{
    display:inline-block;
}

これが更新されたJSフィドルです

乾杯。

編集：答えをもう一度読んでください。左側に表示したいようです。前のことについては申し訳ありませんが、cssを使用すると問題なく実行できます。

.slide1 {
    display:inline-block;
}
.content1{
    float:left;
}

新しいJSフィドル

于 2013-02-07T13:53:50.727 に答える
1

次のことを試してください。effectsから必要jquery-uiになりますが、jsfiddleでわかるように、使用しています。

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').effect('slide', 500);
        return false;
    });
});

http://jsfiddle.net/gVjFs/73/を参照してください

于 2013-02-07T13:56:13.360 に答える
1

このようにしてみてください

.slide1 {
display:inline-block;
}
.content1{
display:inline-block;
float: left;
}

デモを見る

于 2013-02-07T13:57:11.243 に答える
1

次のようなカスタムアニメーションを作成できます。

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.outerWidth();
  return this.show().animate({marginLeft: parseFloat(this.css('marginLeft')) < 0 ? 0 : -h}, speed, easing, callback);  
};
于 2013-02-07T13:58:35.617 に答える
0

あなたはこのような効果を達成することができます：http：//jsfiddle.net/gVjFs/70/

<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">I’m not a good</span>

<a href="#" class="slide1" style="float: left;">Behavior</a>

   $(document).ready(function () {
       $('.slide1').click(function () {
           $('#second').animate({
               width: '100px',
           }, 1000);
       });
   });
于 2013-02-07T14:03:39.453 に答える