JQuery - Animate - PullRequest
Новая
       46

JQuery - Animate

1 голос
/ 05 ноября 2011

У меня есть div, который включает и выключает справа. Таким образом, он соскальзывает и полностью исчезает, а затем снова скользит.

Что я не хочу, так это то, что, когда он отключается, я не хочу, чтобы он полностью исчез, я хочу смещение div на 10px.

В любом случае для достижения этого?

Это JS: 

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        //left: '+=150'
        width: 'toggle'
        }, 500, function(){
    });
}

Вот CSS: 

#weaponEditor{
    position:absolute;
    background-image: url(images/editorPane.png);
    background-repeat: no-repeat;
    width:200px;
    height:342px;
    right:4px;
    top:4px;
}

А в HTML это просто так: 

<div id="weaponEditor"><a href="javascript: hideEditorPane();">click</a></div>

Спасибо

Ответы [ 3 ]

1 голос
/ 05 ноября 2011

Одна возможность: добавьте overflow: hidden к правилам CSS для #weaponEditor, затем: 

function hideEditorPane(){
    //weaponEditor
    var we = $("#weaponEditor"),
        newWidth = (we.width() < 20) ? 200 : 10;
    we.animate({
            width: newWidth
        }, 500, function(){ });
}

Это переключит ширину от 10 до 200 пикселей.

Обновление: As Intersteller_Coderправильно указывает, жесткое кодирование ширины в скрипте ужасно.Вы хотите, чтобы они оставались в CSS, если это вообще возможно.Если переключение ширины в конечном итоге работает для вас, рассмотрите возможность использования метода пользовательского интерфейса jQuery toggleClass .Установите один класс для свернутой ширины и другой класс для расширенной ширины, а затем используйте toggleClass для переключения между ними.

0 голосов
/ 05 ноября 2011

width:'toggle' фактически сокращает div от его первоначальной ширины до 0, никуда не сдвигая его. Если вы хотите продолжать использовать этот метод, тогда установите min-width:10px на div, и он не даст jQuery сделать его меньше этого значения.

Код, который вы закомментировали: left: +=150 - это тип кода, который нужно использовать, если вы хотите выдвинуть его на определенную сумму. Было бы что-то вроде этого, чтобы сдвинуть div влево на 500px: 

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        left: '-=500'   //<-- however wide the div is, minus 10px.
        }, 500, function(){
    });
 }

Так что, очевидно, установите величину скольжения равной ширине скользящего элемента, минус сумму, которую вы хотите «вытянуть»

Надеюсь, это поможет.

0 голосов
/ 05 ноября 2011

Хотя трудно понять, не понимая, чего вы пытаетесь достичь, я бы сказал, что вы хотите установить ширину, чтобы сказать: 10px вместо od с помощью переключателя.

Toggle установит ширину в 0.

Так что используйте, например, 

function hideEditorPane(){
  //weaponEditor
 $("#weaponEditor").animate({
     //left: '+=150'
     width: "10px"
     }, 500, function(){
 }); }

.

То есть, если я правильно понял, что вы не хотите, чтобы div полностью исчез, вы хотите иметь 10pxэтот div остался, чтобы вы могли что-то сделать с ним позже (например, сложить и развернуть одним щелчком мыши).

...