Переключить выдвижение jquery div

Я сделал Jquery div скользящим внутри слайд-шоу. Я использовал эту документацию для его создания.

Если вы посмотрите здесь мой случай, вы можете найти элемент div Jquery, выдвигающийся внутри слайд-шоу, если вы нажмите на стрелку, погружение произойдет, но я не могу дать функцию, чтобы после выхода слайда его можно было закрыть, нажав стрелку назад.

Вероятно, был более простой и лучший способ сделать это, это код, который я использую для этого.

Как я могу заставить свою стрелку работать, чтобы закрыть выдвигающийся div? Если вы считаете, что есть лучший способ добиться этого, дайте мне знать.

Надеюсь объяснение понятно

Спасибо за вашу помощь

  <script>
      $(document).ready(function()
      {
          $(".click").click(function ()
          {
             $(".slideout").toggle("slide", {}, 100);
             $('.click').hide();
             $('.back').toggle();
          });
     });
</script>

Мой CSS-код:

    .slideout { display: none; margin: 0px; width: 300px; height: 450px; background: url("img/rejilla.png") repeat scroll 0 0 transparent; position: absolute; z-index: 101; top:15px;
    -webkit-border-top-left-radius: 16px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 16px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 16px; border-bottom-left-radius: 4px; opacity: 0.5; }
    .click { z-index: 102; left:-15px; position: absolute; top: 10px; z-index:102; }
    .back {float: right; position: absolute; z-index: 102; left: 285px; top: 15px; display: none;}

HTML-код

<div id="slideshow">
        <div id="example">
            <img src="img/arrow.png" class="click" alt="arrow" width="50" height="100" /><div class="slideout">bla bla bla</div><img src="img/arrow-prev.png" class="back" alt="arrow" width="50" height="100" /> 
                <div id="slides">
                    <div class="slides_container">
                        <a href="" title="Slide 1" target="_blank"><img class="slide" src="img/slide-1.jpg" alt="slide-1" width="1020" height="450" /></a>
                        <a href="" title="Slide 2" target="_blank"><img class="slide" src="img/slide-2.jpg" alt="slide-2" width="1020" height="450" /></a>
                        <a href="" title="Slide 3" target="_blank"><img class="slide" src="img/slide-3.jpg" alt="slide-3" width="1020" height="450" /></a>
                    </div>
                </div>
        </div>
    </div>
</div>

toggle jquery slide slidetoggle
person Koala7    schedule 12.11.2012    source источник
comment
также опубликуйте свой html-код ... sp, чтобы было легко понять, что не так   -  person bipen    schedule 12.11.2012
comment
готово @bipen, посмотри. спасибо   -  person Koala7    schedule 12.11.2012

Ответы (2)


arrow_upward
0
arrow_downward

попробуй что-нибудь вроде этого

HTML-код

<img id="myImg" class="click" width="50" height="100" alt="arrow" src="img/arrow.png">

Javascript

<script>
  $(document).ready(function()
  {
      $("#myImg").click(function ()
      {
         $(".slideout").toggle("slide", {}, 100);
         if($(this).hasClass('click')){
            $(this).removeClass('click');
            $(this).addClass('back');
         }else{
            $(this).removeClass('back');
            $(this).addClass('click');
         }
      });
 });
</script>

Я не проверял код, так что это только грубая идея

person rajesh kakawat    schedule 12.11.2012
comment
Я закодировал его с исчезновением/исчезновением (поддерживается IE), и у меня все заработало, $(.click).click(function () { $(.slideout).fadeIn(slow); $('.click'). скрыть(); $('.back').toggle(); }); $(.back).click(function () { $(.slideout).fadeOut(slow); $('.click').toggle(); $('.back').hide(); }); что ты думаешь? - person Koala7; 12.11.2012

arrow_upward
0
arrow_downward

как насчет использования чего-то вроде этого:

$(".click").click(function() {
    margin = +$('.slideout').css('margin-left').replace('px', '');
    if (margin < 0)
    {
        $('.slideout').animate({marginLeft: "0px"}, 500 );
        $('.click').text('<');
    } else {
        $('.slideout').animate({marginLeft: "-200px"}, 500 );
        $('.click').text('>');
    }        
});​

очевидно, вы можете немного пофантазировать (не используя ‹ и > для обозначения направления, которое будет началом), но выдвижение работает, вот демо, хотя оно не использует ваш html

РЕДАКТИРОВАТЬ. Вот обновленная скрипта, использующая слегка измененную версию вашего html. Я уменьшил ширину слайдов и переупорядочил некоторые элементы слайдов (с изображением клика и т. д.), чтобы его было немного легче понять.

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

person Pete Uh    schedule 12.11.2012
comment
Вам нужна помощь, чтобы это работало с вашей разметкой, или вам достаточно приведенного выше кода? - person Pete Uh; 12.11.2012
comment
Привет, Пит!.. Я пытаюсь разобраться с моей разметкой, если вы можете мне помочь, это очень ценно, код Раджеша Какавата ясен, но он не работает. - person Koala7; 12.11.2012