0

私はjQueryが初めてで、別のリンクをクリックしてdivをスライドさせる関数を作成しようとしています。

私の問題は、方向を静的に指定すると関数が機能するが、方向を動的に指定しようとすると機能しないことです。

これが私のコードです:

HTML :

<div id="popshbtn" onclick="uiSlide(this, '#popwrap', 'right')">
    <p>Feedback</p>
</div>

<div id="popwrap" class="popdnone">
    <h3 class="h3">Support</h3> 
</div>

CSS :

#popshbtn{
    background-color: #3385D6;
    color: #FFFFFF;
    font-size:16px;
    width:38px; height:188px;
    border:1px solid #2d7dcb;
    text-align:center;
    cursor:pointer;
    position:absolute;
    bottom:2%;
    right:0;
    z-index:999999;
}
#popshbtn:hover{
    background:#2d7dcb;
}
#popwrap{
    width:478px; 
    border:1px solid #ccc; 
    padding:10px; 
    background:#f5f5f5;
    position:absolute;
    top:20%;
    right:-500px;
    margin-left:-500px;
    display:none;
    height:400px;
}

jQuery :

function uiSlide(ths, target, direction){
console.log(direction);

if( $(target).is(':visible')){

    $(target).hide().animate({
        'direction': '-500px'
    },'fast', function(){
        //call back function
    })

}
else{
    $(target).show().css({
        direction: 0
    },'fast', function(){
        //call back function
    })
}

   }

方向ではなく静的な位置を指定しない限り、このコードは機能しません。

知りたいのですが可能ですか？アニメーションの方向を決定するにはどうすればよいですか?

ご不明な点がございましたら、お知らせください。

ここに js フィドル リンクhttp://jsfiddle.net/sarfarazdesigner/u25Ne/があります。

画像をアップロードしたので、理解を深めるのに役立ちます ここに画像の説明を入力

4

1 に答える 1

1

オブジェクトを animate() jquery API メソッドのパラメーターとして渡すことができます。次に例を示します。

http://jsfiddle.net/u25Ne/3/

$(document).ready(function (e) {
  $('#popshbtn').click(function () {
    uiSlide(this, '#popwrap', 'right');
  })

  $('#popshbtn').html($('#popshbtn').text().replace(/(.)/g, "$1<br />"));
});

function uiSlide(that, target, direction) {
  var optionObj1 = {},optionObj2 = {};
  optionObj1[direction] = "-500px";
  optionObj2[direction] = 0;

  if ($(target).is(':visible')) {
    $(target).animate(optionObj1, 'fast', function () {
         $(this).hide();
    })

  } else {
    $(target).show().animate(optionObj2, 'fast', function () {

    })
  }

}
于 2013-01-11T13:08:17.220 に答える