Скрыть частичное деление - открывать по клику - PullRequest
Новая
       21

Скрыть частичное деление - открывать по клику

0 голосов
/ 12 января 2011

Я знаю, как переключать весь div, однако я хочу скрыть только все, кроме верхних 10% или верхних 100px, например.А затем, когда щелкают по div, открывается весь div.

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

Спасибо. 

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide();

 // toggles the slickbox on clicking the noted link
  $('#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 return false;
  });
});

Ответы [ 3 ]

2 голосов
/ 12 января 2011

Сделал это довольно быстро, заметьте, что он скроет только нижнюю часть.

http://jsfiddle.net/loktar/KEjeP/

Простой переключатель, который изменяет высоту, скрывая остальную часть содержимого внутри. Достаточно просто анимировать, просто измените функции переключения, чтобы отрегулировать высоту, а не добавлять класс.

2 голосов
/ 12 января 2011

Ваш код должен быть примерно таким: 

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    $('#slickbox').animate({height: '20px'});

    // toggles the slickbox on clicking the noted link
    $('#slick-toggle').click(function() {
        $('#slickbox').animate({height: '100%'});
        return false;
    });
});
2 голосов
/ 12 января 2011

Посмотрите изображение на моей домашней странице, это то, что вы хотите сделать? http://www.carsonshold.com/

Когда вы наводите курсор на него, он вылетает, но это легко можно изменить одним щелчком мыши. Это несколько сложно сделать, и все еще не идеально в IE (страница загружается, и клип не распознается, пока вы не наводите на него курсор).

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

var featureDuration = 300; //time in miliseconds

    $('#featured-img').hover(function() {
        $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});            
    }, function() {
        $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
    });

Если вы хотите анимировать клип, вам нужно будет также вставить этот JS, потому что иначе он не будет работать должным образом. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

Посмотрите на CSS в моем коде, если вы не уверены, как я это сделал, или прокомментируйте здесь, если у вас есть какие-либо вопросы.

Приветствия

...