Как я могу сдвинуть содержимое div под определенным углом, используя jquery - PullRequest
Новая
       9

Как я могу сдвинуть содержимое div под определенным углом, используя jquery

1 голос
/ 22 декабря 2011

Я пытаюсь переместить содержимое div в верхнюю правую часть. я пытаюсь, но я не могу получить это, вот мой HTML-код 

<html><body>  
<button id="animatenow">animate now!</button>   
<div id="container">
<div>hi</div>  
<div>there</div>  
</body>
</html>

вот сценарий 

$(document).ready(function(){
$('#animatenow').click(function(){  $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);});  });`

мой CSS 

 #container{width:600px;color:#fff;background:#f00;height:400px}

мой jsfiddle код

Ответы [ 4 ]

1 голос
/ 22 декабря 2011

Что ж, несколько чрезмерно сложный способ сделать это: 

$('#animatenow').click(function(){
    var that = $('#container');
    var h = that.height();
    var w = that.width();
    $('#container')
        .wrap('<div id="placeholder"></div>')
        .parent()
        .css({
            'width' : w,
            'height' : h
        })
        .find('#container')
        .css({
            'position' : 'absolute',
            'top' : 0,
            'left' : 0,
            'right' : 0,
            'bottom' : 0
        })
        .animate(
            {
                'top' : '-' + h,
                'left' : w,
                'right' : '-' + w,
                'bottom' : h
            },2000,
            function(){
                $(this).parent().remove();
            });
});

JS Fiddle .

Выше предполагается, что вы хотите избежать текста скользящего элементаобертывание и перетекание, когда оно выходит из поля зрения.Если у вас все в порядке с перетеканием текста, тогда это намного проще и позволяет избежать добавления нового элемента переноса и (отвратительного) вызова в animate().

Ссылки:

1 голос
/ 22 декабря 2011

Вы забыли position:absolute на #container CSS

0 голосов
/ 22 декабря 2011

Я обновил ваш код здесь . В основном вам нужно анимировать свойства left, top и width после установки позиции: абсолютное свойство # container 

$(document).ready(function() {
    $('#animatenow').click(function() {
        $('#container').animate({
            right: '0',
            top: '0',
            width: '120',
            height: '120'
        }, 'slow');
    });
});

Если вы хотитечтобы переместить div из видимой области или скрыть его, сделайте ширину и высоту 0px

0 голосов
/ 22 декабря 2011 
$(document).ready(function(){
$('#animatenow').click(function(){
    $('#container').animate({
         marginLeft: "700px",
         marginTop: "-=1250px",
    }
    ,1500);
    });
});

Вы пытаетесь получить такой эффект? Я не уверен, что вы имеете в виду, надеюсь, это немного поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...