Слайд Переключить два разных состояния css

Это работает потрясающе, когда мне нужно, чтобы оно скользило вниз и вверх, но из-за моего css есть двойная граница, когда он вверх. Поэтому я попытался вытащить верхнюю границу в главном css и добавить его после слайда, но если кто-то снова переключится на него. Как бы я сделал это так, чтобы на первой позиции (когда она была вверх) нет верхней границы границы, а когда ее вторая позиция (когда она вниз), есть верхняя граница. Вот мой кодСлайд Переключить два разных состояния css

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
    $('.product').css("border-top","1px solid #000"); 
    }); 
});

источник

2012-05-09 cKendrick

Я не играл с JQuery в течение длительного времени, но я думаю, что 'slideToggle();' имеет только полный обратный вызов анимации. Таким образом, вам, вероятно, нужно будет использовать 'slideUp();' и 'slideDown();' для вашего случая. – arma

Demo jsBin

$('.product').toggle(function() { 
    $('.info').stop(1).slideDown('slow'); 
    $(this).css("border-top","1px solid #000"); 
}, function(){ 
    $('.info').stop(1).slideUp('slow'); 
    $(this).css("border-top","1px solid transparent"); 
});

Я использовал .stop(1), чтобы очистить некоторые очереди анимации.

источник

2012-05-09 07:40:12

Почему slideToggle дважды? Вы должны скользить вверх/вниз в этом случае, я думаю, – Malyo

@Malyo Почему бы и нет? Вам нравится демо? Вы можете использовать slideToggle и slideUp/down, как вы это делаете –

Так как это кажется бессмысленным, поскольку нам не нужно выполнять двойное действие, если вы знаете, что я имею в виду, достаточно двух триггеров для отдельных действий. Мне нравится отредактированная версия! – Malyo

Вы можете использовать jquery toggleClass путем создания 2 CSS классов с соответствующими границами. и переключая их как и в случае необходимости

Пример

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
    $('.product').toggleClass('addBorder'); 
    }); 
});

Вы можете проверить live example on jsfiddle

источник

2012-05-09 07:40:04 swapnilsarwe

Ну это интересно играть с JQuery :)

Вот мой небольшой эксперимент:

$('.product').click(function() { 
    if($('.toggled').length > 0){ 
     $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","none").removeClass('toggled'); 
     }); 
    }else{ 
     $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","1px solid #000").addClass('toggled'); 
     }); 
    } 
});

http://jsfiddle.net/kaunt/

источник

2012-05-09 07:40:24 arma

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","1px solid #000"); 
     if(!$('.info').is(':visible')) $('.product').css("border-top","1px solid transparent"); 
    }); 
});

DEMO

источник

2012-05-09 07:50:42 thecodeparadox

Слайд Переключить два разных состояния css

ответ

Смежные вопросы