Question

demo：动画从右到左动画。但我需要使用从左到右的动画。

基本上，我正在使用这个脚本：

    var counter = 1;
        var thisw = $('.btn.close').parent().outerWidth();
        var thish = $('.btn.close').parent().outerHeight();
        $('.btn.close').on('click',function(){
            counter = !counter;
            if(counter){
            $(this).parent().animate({width: '5em', height: '2em'},1000);
            } else{
                $(this).parent().animate({width: thisw, height: thish}, 1000);
            }
        }).click();//click trigger is added because on first click it doesn't animate
//the reason is it is not getting actual width and height value as it is set in em but with jquery we get px value.

我甚至认为我的脚本可以写成比使用三元运算符更好的东西。但我对此很感兴趣。

问题：

那么编写上述代码的jquery的更好方法是什么？
是否可以在不使用绝对位置的情况下从左到右进行动画处理？

Answer 1

使用它：

 div{   width: 50em;
        height: 50em;
        background: red;
        float:right;
        direction:rtl;
    }

    <div style="direction:rtl;">
        <div>click me</div>
    </div>

Answer 2

请针对您的问题尝试此解决方案。

<强>脚本

$('div').on('click',function(){
    var $this = $(this);
    if( !$this.is('.active') ){
        $this.animate({'width':'5em','height':'5em'},1000);
        $this.addClass('active')
    } else{
        $this.animate({'width':'50em','height':'50em'},1000);
        $this.removeClass('active')
    }
});

Fiddle Demo

如何从左到右动画？

2 个答案: