0

コード：

$("#previous_image").click(function(){
  $("#images").animate({"right": "+=250px"}, "slow");
    return false;
});

console.logを実行すると、クリック機能が表示されるので、問題はありません。私のdivはアニメ化されたくないようです。

私のCSSコード（SASS）

#images_container{
  display: block;
  margin-left: 39px;
  width: 630px;
  height: 81px;
  overflow: hidden;
}

#images{
  display: block;
  width: 1500px;
  min-width: 650px;


  img{
    margin-top: 7px;
    display: inline-block;
    height: 66px;
    cursor: pointer;

    filter: url(svg/filters.svg#grayscale);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */

    transition: filter .3s ease-in-out;
    -moz-transition: filter .3s ease-in-out;
    -webkit-transition: filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    -moz-transition: -webkit-filter .3s ease-in-out;
    -webkit-transition: -webkit-filter .3s ease-in-out;

    @include transition-property(-webkit-filter);
    @include transition-duration(.3s);
    @include transition-timing-function(ease-out);

    &:hover{
      filter: none;
      -webkit-filter: grayscale(0);
    }
  }

何か考えはありますか？それは私をびっくりさせています。

乾杯。W。

4

1 に答える 1

1

あなたは必要ないはずです+=

これを試して：

$("#previous_image").click(function(){
    $("#images").animate({"right": "250px"}, "slow");
    return false;
});

また、使用するrightにleftは、絶対に配置された要素が必要です。何かを絶対に配置するには、コンテナを相対的に配置する必要があります。

したがって、cssを次のように変更します。

#images_container{
  display: block;
  margin-left: 39px;
  width: 630px;
  height: 81px;
  overflow: hidden;
  position: relative;
}

#images{
  display: block;
  width: 1500px;
  min-width: 650px;
  position: absolute;
}
于 2013-02-19T20:34:06.683 に答える