jQuery动画左图像CSS

问题描述 投票:0回答:1

我正在尝试制作图像动画(animate({left:'0'}, 500);当我每次单击新闻通讯菜单项时。开头的图片在css中定义为隐藏,然后必须显示动画。

以下是代码段:

$(function() {
  var
    animation = function(href) {
      var
        name = "active",
        element = $("a[href='" + href + "']"),
        $target = $(href);

      $("html, body").stop().animate({
        scrollLeft: $target.offset().left
      }, 1200);

      element.closest("ul").find("li").removeClass(name);
      element.parent().addClass(name);

      $('#wrap').find('.shown').removeClass('shown');
      $target.addClass('shown');
      $('#wrap').find('.shown1').removeClass('shown1');
      $target.addClass('shown1');
      //text effect
      $('#wrap').find('.load').removeClass('load');
      $target.addClass('load');
      //text translate
      $('#wrap').find('.move').removeClass('move');
      $target.addClass('move');
      //animate hide and show image right to left
      $('#myimage img3').animate({
        left: '0'
      }, 500)
    },
    menu = $("#list");

  animation(menu.find("li").eq(0).find("> a").attr("href"));

  $("#cssmenu a").bind("click", function(event) {
    var target = $(this).attr("href");

    animation(target);

    //always want the fade? uncomment this:
    //$('#cssmenu').find('img').css('opacity', 0);

    //$(target).find('img').fadeTo(3000,1);


    event.preventDefault();
  });

  $("#next, #prev").click(function(event) {
    var
      positionActiveClass = menu.find("> li.active").index(),
      menuLength = menu.find("> li").length - 1,
      buttonId = $(this).attr("id");

    if (buttonId === "next") {
      if (positionActiveClass === (menuLength)) {
        newElementActiveClass = menu.find("li").eq(0);
        newPositionActiveClass = newElementActiveClass.find("> a").attr("href");

        animation(newPositionActiveClass);
      } else {
        newElementActiveClass = menu.find("li").eq(positionActiveClass + 1);
        newPositionActiveClass = newElementActiveClass.find("> a").attr("href");

        animation(newPositionActiveClass);
      }
    } else {
      if (positionActiveClass === 0) {
        newElementActiveClass = menu.find("li").eq(menuLength);
        newPositionActiveClass = newElementActiveClass.find("> a").attr("href");

        animation(newPositionActiveClass);
      } else {
        newElementActiveClass = menu.find("li").eq(positionActiveClass - 1);
        newPositionActiveClass = newElementActiveClass.find("> a").attr("href");

        animation(newPositionActiveClass);
      }
    }

    event.preventDefault();
  });

});
body {
  width: 8000px;
  margin: 0;
}

.panel {
  width: 930px;
  float: left;
  padding-left: 30px;
  padding-right: 1040px;
  margin-top: 45px;
  background: #eee;
}

#banner {
  position: fixed;
}

#banner ul {
  line-height: 45px;
  margin: 0 30px;
  padding: 0;
}

#banner ul li {
  display: inline;
  margin-right: 30px;
}

#wrap {
  margin-top: 45px;
  float: left;
}

#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 1366px;
  position: relative;
  display: block;
  font-size: 12px;
  font-weight: bold;
  background: #f2f1f2;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #f2f1f2;
  zoom: 1;
}

#cssmenu ul:before {
  content: '';
  display: block;
}

#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}

#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0 4px;
}

#cssmenu li a {
  display: block;
  float: left;
  color: #797978;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px 7px 20px;
  border-bottom: 3px solid transparent;
}

#cssmenu li a:hover {
  color: #6c8cb5;
  border-bottom: 3px solid #00b8fd;
}

#cssmenu li.active a {
  display: inline;
  border-bottom: 3px solid #00b8fd;
  float: left;
  margin: 0;
}

#cssmenu {
  position: fixed;
}

.panel img {
  opacity: 0;
  -moz-transition: opacity 3000ms ease-in-out;
  -webkit-transition: opacity 3000ms ease-in-out;
  transition: opacity 3000ms ease-in-out;
}

.shown img {
  opacity: 1;
}

.panel .img2 {
  opacity: 0;
  -moz-transition: opacity 3000ms 2s ease-in-out;
  -webkit-transition: opacity 3000ms 2s ease-in-out;
  transition: opacity 3000ms 2s ease-in-out;
}

.shown1 .img2 {
  opacity: 1;
}

#test p {
  opacity: 0;
  font-size: 21px;
  margin-top: 25px;
  text-align: center;
  -webkit-transition: opacity 5s ease-in;
  -moz-transition: opacity 5s ease-in;
  -ms-transition: opacity 5s ease-in;
  -o-transition: opacity 5s ease-in;
  transition: opacity 5s ease-in;
}

.load #test p {
  opacity: 1;
}

#translate p {
  left: 0px;
  top: 200px;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
}

.move #translate p {
  transform: translate(350px, 0);
  -webkit-transform: translate(350px, 0);
  -o-transform: translate(350px, 0);
  -moz-transform: translate(350px, 0);
}

#myimage {
  overflow: hidden;
  position: relative;
}

#myimage .img3 {
  postion: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cssmenu">
  <ul id="list">
    <li><a href="#home">Home</a></li>
    <li><a href="#newsletter">Newsletter</a></li>
    <li><a href="#directions">Directions &amp; Opening Hours</a></li>
    <li><a href="#contact">Contact us</a></li>
  </ul>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>
<div id="wrap">
  <div id="home" class="panel">
    <h2>Home</h2>
    <img src="http://lorempixum.com/200/200/people/3" /> &nbsp;
    <img class="img2" src="http://lorempixum.com/200/200/people/1" />

  </div>
  <div id="newsletter" class="panel">
    <h2>Newsletter</h2>
    <!--<img src="http://lorempixum.com/200/200/people/1"/>-->
    <div id="myimage">
      <img class="img3" src="http://lorempixum.com/200/200/people/1" />
    </div>
  </div>
  <div id="directions" class="panel">
    <h2>Directions</h2>
    <!--<img src="http://lorempixum.com/200/200/people/2"/>-->
    <div id="test">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="contact" class="panel">
    <h2>Contact</h2>
    <!--<img src="http://lorempixum.com/200/200/people/4"/>-->
    <div id="translate">
      <p>translate to right</p>
    </div>
  </div>

也许可以通过添加或删除类来使用CSS来完成,但我不知道如何做。我给你一个我要做的事的例子。

这是我的HTML结构:

<div id="newsletter" class="panel">
        <h2>Newsletter</h2>

        <div id="myimage">
        <img class="img3" src="http://lorempixum.com/200/200/people/1"/>            
        </div>
    </div>

我的CSS看起来像这样的图像:

#myimage {
    overflow:hidden;
    position:relative;
}
#myimage .img3 {
    postion:absolute;
}

在我的Jquery函数中,我实现了以下脚本:

//animate hide and show image right to left
                $('#myimage img3').animate({left:'0'}, 500);
jquery html css animation jquery-animate
1个回答
0
投票

使用

© www.soinside.com 2019 - 2024. All rights reserved.