hide（）で要素をフェードアウトする方向

Question

this fiddleに示すコードを使用して、hide（）が提供するエフェクトでdivを削除しています。 divを左上ではなく右上隅にフェードアウトさせようとしていますが、オプションでdirection:'right'を指定しても動作するようにはできませんでした。

これが可能なら誰でも知っていますか？ ありがとうございます。

Answer 1

現在使用しているhide関数は、jQuery UIに含まれている拡張機能です。 この関数はjQuery UI hide)を参照してください（内部でアニメーション関数を呼び出す

あなたがここに探している効果を得るためにはスニペットは次のとおりです。

代わりに、使用

$(function() { 
 
    $('div').on('click', function() { 
 
    $(this).hide('size', { 
 
     to: { 
 
     height: 0, 
 
     width: 0, 
 
     marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0 
 
     } 
 
    }, 
 
       function() { 
 
     $(this).remove(); 
 
    }); 
 
    }); 
 
});

div { 
 
    cursor: pointer; 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: #3b85c3; 
 
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div> 
 
</div>

、標準animateの機能は、対応するスニペットです：

$(function() { 
 
    $('div').on('click', function() { 
 
    $(this).animate({ 
 
     height: 'toggle', 
 
     width: 'toggle', 
 
     marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0 
 
    }, function() { 
 
     $(this).remove(); 
 
    }); 
 
    }); 
 
});

div { 
 
    cursor: pointer; 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: #3b85c3; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div> 
 
</div>