Jquery. Живая проблема ширины - PullRequest
Новая
       11

Jquery. Живая проблема ширины

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

Заранее спасибо за любую помощь в этом, я постараюсь объяснить это хорошо.

У меня есть контейнер шириной 1000 пикселей и высотой 220 пикселей, в этом у меня будет три столбца высотой 220 пикселей, нос различной шириной (77px, 200px и 300px).Когда вы щелкнете по одному элементу div, он откроется до фиксированного размера (одинакового для каждого, скажем, 400px), а остальные, которые не нажаты, уменьшатся до своих первоначальных размеров (77px, 200px и 300px).Как аккордеон с разной шириной ..

Мой jquery появляется, но не совсем, я знаю, как создать событие по щелчку, я знаю, что мне нужно уменьшить все, но тот, который я нажал обратно к ихОригинальный размер.Я заканчиваю, но сделав один клик, увеличьте его до необходимого размера.

jsfiddle здесь! 

    $(document).ready(function(){
 // Your code here
 $('.section').click(function() {
  $('.section').not(this).animate({width:"77px"},400);
  //alert('clicked!');
  $(this).animate({width:"400px"},400);
 });
});

<div id="pictureNavContainer">

 <div class="section pictureSectionOne" id="1"></div>
 <div class="section pictureSectionTwo" id="2"></div>
 <div class="section pictureSectionThree" id="3"></div>

</div>

<style>
#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;}
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;}
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;}
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;}
</style>

Я нашел какое-то решение: 

<script>
$(document).ready(function(){
    // Your code here
    $('.section').click(function() {



        $('#1').animate({width:"50px"},400);
        $('#2').animate({width:"100px"},400);
        $('#3').animate({width:"200px"},400);

        //alert('clicked!');
        $(this).animate({width:"400px"},400);
    });
});
</script>

Но код не очень хороший .. но он работает

Это: 

$(function(){

    var $sections = $('.section');
    var orgWidth = [];

    var animate = function() {
        var $this = $(this);
        $sections.not($this).each(function(){
            var $section = $(this),
                org = orgWidth[$section.index()];
            $section.animate({
                width: org
            }, 400);
        });
        $this.animate({
            width: 400
        }, 400);
    };

    $sections.each(function(){
        var $this = $(this);
        orgWidth.push($this.width());
        $this.click(animate);  
    });
});

1 Ответ

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

Хорошо, я думаю, что получил его на работу.Как и this ?

Однако, это не устанавливает кликаемый элемент на фиксированный размер, а на размер, который остается.Если вы измените размер выбранного элемента до фиксированного размера, три столбца станут шире или тоньше, чем 1000px, это действительно то, что вы хотите?Это именно то, что вы просили, но я не уверен, что это то, что вы хотите.

Код со встроенными комментариями: 

$(function(){
    // we cache the result set from the selector so we can
    // reuse them without having to query the DOM again
    var $sections = $('.section');

    // placeholder array for original widths
    var orgWidth = [];

    // handler function to take care of the animations
    var animate = function() {
        var $this = $(this);
        // iterate through all but current element
        $sections.not($this).each(function(){
            // create jQuery object and fetch original width
            var $section = $(this),
                org = orgWidth[$section.index()];
            // animate current element
            $section.animate({
                width: org
            }, 400);
        });
        // animate current element
        $this.animate({
            width: 400
        }, 400);
    };

    // let's iterate through each of the elements
    $sections.each(function(){
        // create jQuery object for current element
        var $this = $(this);
        // push the elements width into the placeholder
        orgWidth.push($this.width());
        // bind the handler to the click event
        $this.click(animate);  
    });
});
...