Направление при исчезновении элемента с помощью hide()

Question

Я использую код, показанный в this fiddle, для удаления div с эффектом, предоставляемым hide(). Я пытаюсь заставить div угасать в верхнем правом углу вместо левого верхнего уровня, но не смог заставить его работать даже при указании direction:'right' в параметрах.

Кто-нибудь знает, возможно ли это? Спасибо заранее.

Answer 1

Скрытая функция, которую вы используете в настоящее время, является расширением, включенным в пользовательский интерфейс jQuery. . Эта функция вызывает внутренне функцию анимации (см 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>