JQuery Cycle Fade переход не работает в IE - PullRequest
Новая
       34

JQuery Cycle Fade переход не работает в IE

2 голосов
/ 03 июня 2011

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

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

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

Затухание отлично работает в Firefox и Chrome. У меня в настоящее время нет исчезновения на сайте, но для справки, вот URL: http://www.jnicholasphoto.com

Вот Javascript: 

SetHeightToTallestChild('.slideshow');
$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});  
$(window).resize(function() {
  SetHeightToTallestChild('.slideshow');
});



 });
function SetHeightToTallestChild(i) {
var tallest = 0;
$(i).children().each(function(){
  var h = $(this).height();
  if(h > tallest)
  tallest = h;
});
$(i).height(tallest);
}

HTML: 

div class='photo floatr' id='photo'> 
    <div class='slideshow cycle-main-frame clearfix' > 
        <div class='cycle-main-frame-row'> <img src="images/collage1.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage2.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/three.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage3.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage4.png"  alt='J Nicholas Photography' /></div> 

    </div>

CSS (относится к изображениям цикла): 

.photo {
  padding: 15px 0px 15px 15px;
  margin: 0px;
  margin-top: 35px;
  width: 65%;
  }
.photo img {
  width: 100%;
  position: relative;
  display: block;
  border: 8px solid #2F2E29;
  border-right: none;
  }
.cycle-main-frame {
  width: auto !important;
  position: relative !important;
  overflow: visible !important;
}
.cycle-main-frame-row {
  width: auto !important;
  position: relative !important;
  height: 0 !important;
  }

Ответы [ 2 ]

1 голос
/ 03 июня 2011

Вкл. 

$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});

изменить часть FX на 

        fx: 'fade',
0 голосов
/ 29 октября 2011

IE 8 не поддерживает исчезновение прозрачных PNG. IE 9 делает это нормально.

вы хотите создать оператор if и определить поддержку непрозрачности: 

if(!jquery.support.opacity) {

    // run IE slideshow

} else {

    // run slideshow for browsers that support opacity

}
...