Slide Basculer deux états css différents

Cela fonctionne génial quand j'ai besoin de glisser vers le bas et vers le haut mais à cause de mon css il y a une double bordure quand il est en place. J'ai donc essayé de sortir la bordure supérieure dans le css principal et de l'ajouter après la diapositive, mais si quelqu'un bascule encore une fois c'est toujours là. Comment pourrais-je faire en sorte qu'en première position (quand il est en haut) il n'y a pas de bordure supérieure et quand c'est en deuxième position (quand elle est en bas) il y a un bord supérieur. Voici mon codeSlide Basculer deux états css différents

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

Source

2012-05-09 cKendrick

Je n'ai pas joué avec jquery depuis longtemps, mais je pense 'slideToggle();' a seulement l'animation complète de rappel. Donc, vous devrez probablement utiliser 'slideUp();' et 'slideDown();' pour votre cas. – 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"); 
});

je .stop(1) pour effacer une file d'attente d'animation.

Source

2012-05-09 07:40:12

Pourquoi glisserToggle deux fois? Vous devriez glisser vers le haut/bas dans ce cas je pense – Malyo

@Malyo Pourquoi pas? Vous aimez la démo? Vous pouvez utiliser slideToggle et slideUp/down comme vous le souhaitez –

Comme cela ne semblerait pas utile puisque nous n'avons pas besoin de trier l'action si vous savez ce que je veux dire, 2 déclencheurs pour des actions simples sont suffisants. J'aime la version éditée! – Malyo

Vous pouvez utiliser le jquery toggleClass en créant 2 classes CSS avec frontières respectives. et les basculer en cas de besoin

Exemple

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

Vous pouvez vérifier les live example on jsfiddle

Source

2012-05-09 07:40:04 swapnilsarwe

Eh bien, il est amusant de jouer avec jquery :)

Voilà ma petite expérience:

$('.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/

Source

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

Source

2012-05-09 07:50:42 thecodeparadox

Slide Basculer deux états css différents

Répondre

Questions connexes