jQuery 动画和大小设置仅适用于 Chrome

【问题标题】：jQuery animate and size settings works only in ChromejQuery 动画和大小设置仅适用于 Chrome
【发布时间】：2016-03-16 12:22:44
【问题描述】：

我正在尝试让一个滑块在所有浏览器上都可以使用，但它仅适用于 Chrome。 我写了一次，然后我重写了它，以为我做错了。但似乎我找不到导致我的代码无法在除 Chrome 之外的任何浏览器中运行的原因。 此外，它应该显示多少缩略图的响应能力仅适用于 Chrome。 我最好的猜测是因为我没有正确使用选择器。

我只写了向右箭头的代码，然后就停下来了，因为我试图找出导致动画不起作用的原因以及确定边距和最大幻灯片的计算。

https://jsfiddle.net/b050k4re/

HTML：

<div id="slider-wrapper">
    <h2>Check out our Shows!</h2>
    <p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
    <div class="slider-container">
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>

            </ul>
        </div>
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
    </div>
</div>

CSS： 

body {
    margin: 0 0;
}
#slider {
    width: 100%;
    height: 130px;
    overflow: hidden;
    margin: 0px 10px;
    float: left;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 130px;
    margin: 0;
    padding: 0;
    left: 0;
    position: relative;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 121px;
    height: 120px;
    border: 1px solid #fff;
    margin: 5px 10px;
    position: relative;
    box-shadow: 2px 1px 2px #888888;
}

#go-left {
    float: left;
}

#go-right {
    float: right;
}

.arrow {
    width: 40px;
    height: 40px;
    margin-top: 50px;
    cursor: pointer;
}

.arrow#go-right {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.slider-container {
    max-width: 960px;
    width: 100%;
    margin: 0px auto;
    height: 100px;
    margin-top: 50px;
}

#slider > ul > li > a > img {
    height: 100%;
    width: 100%;
}

.show-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 8, 21, 0.7);
    line-height: 121px;
    vertical-align: middle;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 650;
    border-top: 2px #eee solid;
    display: none;
    height: 100%;
}

.slide a {
    width: inherit;
    height: inherit;
    display: block;
}

#slider-wrapper {
    background-color: #eee;
    height: 220px;
    padding-top: 40px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
    background: rgb(0,17,44); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    padding: 0px;
    margin-top: -20px;
    text-align: center;
    text-transform: uppercase;
}

#slider-wrapper p {
    color: #fff;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    padding: 0;
    margin-bottom: -30px;
    margin-top: -10px;
}

.slide > a > div > p {
    display: none;
}

jQuery：

jQuery(document).ready(function($) {


// The total number of thumbnails
var thumbnailCount = $("#slider .slides .slide").length;

// Thumbnail size
var thumbWidth = 120;
var thumbHeight = 120;

// Minimum margin between thumbnails
var minMargin = 5;

// Variables through which we determine how many thumbnails
// we can show. We decide this by calculating how many
// fit, taking in consideration margins, thumbnail sizes
// and borders.
var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);
var slideBorder = parseInt($(".slides .slide").css("border-width").replace("px", ""), 10);

// Slider container holds the arrows and the slides together.
// We want the slider container to have a maximum width
// Default is 960px
// Get the size of the slider-container
var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
// The slides container width must be the slider container width
// minus the arrow widths and the margins of the slides container
// itself.
var slidesContainer = sliderContainer -  (2 * arrowWidth + 2 * sliderMargin);
$("#slider").css("width", slidesContainer);
// The displayed slides limit is decided by the slides container
// width and the width of the thumbnails
var slideLimit = slidesContainer / thumbWidth;
var maxSlides = Math.floor(slideLimit);
// We know the number of maximum slides for the current screen size
// We have to calculate the margins from the remaining size
// depending on the thumbnail border sizes
var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

// If the new Margin Sizes are smaller than the minimum margin sizes that we want
// We are going to lower the the slide limit by 1 until the new margins are
// bigger or equal to the wanted minimum margin sizes
while (newMarginSizes <= minMargin && maxSlides >= 1) { 
    maxSlides--;
    remainingSpace = (slideLimit - maxSlides) * thumbWidth;
    newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
}

// We need to know how much we have to slide the
// slides container in order to show it perfectly.
var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

// We assign the new margin sizes for the slides
$(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


// Functionality for left and right arrows
var leftArrow = $(".slider-container #go-left");
var rightArrow = $(".slider-container #go-right");
var slides = $("#slider .slides");
// We need to know how many slides are left to show on either
// sides.
var remainingSlidesRight = thumbnailCount - maxSlides;
var remainingSlidesLeft = 0;


leftArrow.click(function() {

});

rightArrow.click(function() {
    console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
    if (remainingSlidesRight > 0) {
        slides.animate({'left': "-=" + slideSize}, 1000);
        remainingSlidesRight--;
        remainingSlidesLeft++;
    } else {
        slides.animate({'left': "0"}, 1000);
        remainingSlidesRight = thumbnailCount - maxSlides;
        remainingSlidesLeft = 0;
    }
});

});

【问题讨论】：

    标签： jquery firefox jquery-selectors jquery-animate microsoft-edge


    【解决方案1】：

    参考Retrieval of shorthand CSS properties你需要改

    border-width to border-top-width

    在`var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);

    有关边框的更多详细信息，请参阅MDN

    所以sn-p是：

    jQuery(document).ready(function($) {


  // The total number of thumbnails
  var thumbnailCount = $("#slider .slides .slide").length;

  // Thumbnail size
  var thumbWidth = 120;
  var thumbHeight = 120;

  // Minimum margin between thumbnails
  var minMargin = 5;

  // Variables through which we determine how many thumbnails
  // we can show. We decide this by calculating how many
  // fit, taking in consideration margins, thumbnail sizes
  // and borders.
  var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
  var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
  var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);

  // FIX: border-width to border-top-width
  var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);


  // Slider container holds the arrows and the slides together.
  // We want the slider container to have a maximum width
  // Default is 960px
  // Get the size of the slider-container
  var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
  // The slides container width must be the slider container width
  // minus the arrow widths and the margins of the slides container
  // itself.
  var slidesContainer = sliderContainer -  (2 * arrowWidth + 2 * sliderMargin);
  $("#slider").css("width", slidesContainer);
  // The displayed slides limit is decided by the slides container
  // width and the width of the thumbnails
  var slideLimit = slidesContainer / thumbWidth;
  var maxSlides = Math.floor(slideLimit);
  // We know the number of maximum slides for the current screen size
  // We have to calculate the margins from the remaining size
  // depending on the thumbnail border sizes
  var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
  var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

  // If the new Margin Sizes are smaller than the minimum margin sizes that we want
  // We are going to lower the the slide limit by 1 until the new margins are
  // bigger or equal to the wanted minimum margin sizes
  while (newMarginSizes <= minMargin && maxSlides >= 1) {
    maxSlides--;
    remainingSpace = (slideLimit - maxSlides) * thumbWidth;
    newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
  }

  // We need to know how much we have to slide the
  // slides container in order to show it perfectly.
  var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

  // We assign the new margin sizes for the slides
  $(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


  // Functionality for left and right arrows
  var leftArrow = $(".slider-container #go-left");
  var rightArrow = $(".slider-container #go-right");
  var slides = $("#slider .slides");
  // We need to know how many slides are left to show on either
  // sides.
  var remainingSlidesRight = thumbnailCount - maxSlides;
  var remainingSlidesLeft = 0;


  leftArrow.click(function() {

  });

  rightArrow.click(function() {
    console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
    if (remainingSlidesRight > 0) {
      slides.animate({'left': "-=" + slideSize}, 1000);
      remainingSlidesRight--;
      remainingSlidesLeft++;
    } else {
      slides.animate({'left': "0"}, 1000);
      remainingSlidesRight = thumbnailCount - maxSlides;
      remainingSlidesLeft = 0;
    }
  });

});
    body {
  margin: 0 0;
}
#slider {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin: 0px 10px;
  float: left;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 130px;
  border: 1px solid #fff;
  margin: 0;
  padding: 0;
  left: 0;
  position: relative;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 121px;
  height: 120px;
  border: 1px solid #fff;
  margin: 5px 10px;
  position: relative;
  box-shadow: 2px 1px 2px #888888;
}

#go-left {
  float: left;
}

#go-right {
  float: right;
}

.arrow {
  width: 40px;
  height: 40px;
  margin-top: 50px;
  cursor: pointer;
}

.arrow#go-right {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.slider-container {
  max-width: 960px;
  width: 100%;
  margin: 0px auto;
  height: 100px;
  margin-top: 50px;
}

#slider > ul > li > a > img {
  height: 100%;
  width: 100%;
}

.show-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 8, 21, 0.7);
  line-height: 121px;
  vertical-align: middle;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 650;
  border-top: 2px #eee solid;
  display: none;
  height: 100%;
}

.slide a {
  width: inherit;
  height: inherit;
  display: block;
}

#slider-wrapper {
  background-color: #eee;
  height: 220px;
  padding-top: 40px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
  background: rgb(0,17,44); /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  padding: 0px;
  margin-top: -20px;
  text-align: center;
  text-transform: uppercase;
}

#slider-wrapper p {
  color: #fff;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  padding: 0;
  margin-bottom: -30px;
  margin-top: -10px;
}

.slide > a > div > p {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


<div id="slider-wrapper">
    <h2>Check out our Shows!</h2>
    <p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
    <div class="slider-container">
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>

            </ul>
        </div>
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
    </div>
</div>

    `

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2013-09-24
      • 2015-11-29
      • 1970-01-01
      • 1970-01-01
      • 2010-09-18
      • 2017-01-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode