IE8, jquery карусель.изменение ширины предмета с помощью JavaScript - PullRequest
Новая
       24

IE8, jquery карусель.изменение ширины предмета с помощью JavaScript

2 голосов
/ 10 августа 2011

Я столкнулся с проблемой при создании карусели с помощью jQuery. Он отлично работает с Chrome, FF, IE7 и IE9. IE8 - единственный, у кого проблемы.

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

Проблема в том, что когда я щелкаю один из элементов (item1), он не работает. И когда я смотрю на это с помощью инструментов разработчика IE, я ясно вижу, что он действительно открыт. Это просто не делает изменения. Затем, если я щелкну по элементу справа от item1 (item2), item1 перейдет на расширенную ширину без анимации. Если я снова нажму item1, он вернется к исходной ширине, и именно здесь возникает проблема. Item2 все еще далеко направо, когда он должен быть прямо рядом с item1.

Я воспроизвел эту проблему на гораздо более простом примере, чем мой оригинальный проект, так как он довольно большой. Его можно найти здесь: http://sevanteri.com/testing/ie/scrollthing/ Полный источник html / css / js также вставлен ниже.

Как тиражировать (сначала протестируйте с другими браузерами, чтобы увидеть, как это должно работать):

  1. прокрутите панель вправо, чтобы увидеть третий (желтый) и четвертый (серый) элементы
  2. щелкните желтый элемент
  3. нажмите на серый элемент
  4. снова нажмите на желтый элемент

Теперь вы должны увидеть черный (цвет родительского элемента) справа от желтого элемента. И если вы прокрутите вправо, то увидите там серый элемент.

И мой вопрос: была ли у кого-нибудь эта проблема раньше, и есть ли решение для нее?

Источник: 

<!DOCTYPE html> 
<html> 
<head><title>ie testing</title> 

<style type="text/css"> 

    #test {height: 150px; background-color: black; overflow:auto;position:relative;width:700px;border: 1px solid black;}
    #pane {width: 5000px;position:relative;}
    .item {width: 240px; height: 150px; float:left; overflow: hidden; position:relative;}
    #item1 {background-color: red;}
    #item2 {background-color: blue;}
    #item3 {background-color: yellow;}
    #item4 {background-color: gray;}
    #item5 {background-color: pink;}
    #item6 {background-color: white;}
    .item-content { height: 150px; width: 2px;} /* this didn't seem to affect anything */

</style> 

</head> 
<body> 

  <div id="test"> 
    <div id="pane"> 
        <div id="item1" class="item"><div class="item-content"> </div></div> 
        <div id="item2" class="item"><div class="item-content"> </div></div> 
        <div id="item3" class="item"><div class="item-content"> </div></div> 
        <div id="item4" class="item"><div class="item-content"> </div></div> 
        <div id="item5" class="item"><div class="item-content"> </div></div> 
        <div id="item6" class="item"><div class="item-content"> </div></div> 
        <div style="clear:both; float:none;"> </div> 
    </div> 
  </div> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    t = $("#test");
    $pane = $("#pane");
    $items = $(".item", $pane);
    startw = $($items[0]).width();

    $(".item", $pane).click(function() {
        $t = $(this);
        if ($t.width() == startw) {
            $t.animate({width:700}, 200);
        } else {
            $t.animate({width:startw}, 200);
        }
    });

    asd1 = $("#item1");
    asd2 = $("#item2");
    asd3 = $("#item3");
    asd4 = $("#item4");
    asd5 = $("#item5");
    asd6 = $("#item6");

</script> 
</body> 
</html>

1 Ответ

1 голос
/ 11 августа 2011

Некоторое решение найдено deadeye536 на facepunch.com .

Похоже, IE8 не может перерисовать.

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

$(".item", $pane).click(function() {
    $t = $(this);
    if ($t.width() == startw) {
        $t.animate({width:700}, 200);
    } else {
        $t.animate({width:startw}, 200);
    }
window.setTimeout(function() {
    if ($.browser.msie&&$.browser.version.slice(0,1)=="8") {
        $('.item').each(function() {
            this.style.cssText = this.style.cssText;
        });
    }
}, 205);
});

Таким образом, он в основном сбрасывает CSS элементов. Это все еще не выглядит идеально, но я могу жить с этим. По крайней мере, сейчас это работает.

...