Question

当您第一次访问this website时，您可以看到logo hello（lado soft furniture）和滚动条的动画 - 我只需要运行一次这个动画。之后，如果你来到某个类别然后将返回主页视图（ГЛАВНАЯ） - 徽标你好和滚动条的动画将再次运行。

// MY HOME VIEW
<div id='logo-hello'>
  <img src='http://lado-furniture.com.ua/sources/images/logo-hello-big.png'>
  <img src='http://lado-furniture.com.ua/sources/images/logo-hello-small.png'> 
</div>
<div class='sliderContainer'>
  <div class='iosSlider'>
    <div class='slider'>
      <div id='advertising1' class='item'></div>
      <div id='advertising2' class='item'></div>
      <div id='advertising3' class='item'></div>
      <div id='advertising4' class='item'></div>
      <div id='advertising5' class='item'></div>
    </div>
  </div>
</div>
<div id='home-scrollbar-holder'></div>

  // H O M E  C O N T R O L L E R
  app.controller('homeController', function ($scope){

    // align logo hello vertically through the middle
    $('#logo-hello img:first').load(function(){
      var logoBigHeight = $(this).height();
      $('#logo-hello').css({ 
        'height'    : logoBigHeight + 'px',
        'margin-top': '-' + (logoBigHeight / 2) + 'px'
      });
    });

    // appearance of logo hello, logo and menu
    $('#logo-hello img:first').animate({opacity: '1'}, 1000, function (){
      $('#logo-hello img:last').animate({opacity: '1'}, 1000, function (){
        $('#logo-hello').delay(1000).animate({opacity: '0'}, 1000, function (){ 
          $(this).remove();

          $('#logo-holder').animate({top:'0'});
          $('#menu-wrap').animate({bottom:'0'});
          $('#home-scrollbar-holder').animate({bottom:'60px'});
        });
      });
    });

    // slider settings
    $('.iosSlider').iosSlider({
      //autoSlide: true,
      desktopClickDrag: true,
      snapToChildren: true,
      scrollbarDrag: true,
      scrollbarContainer: '#home-scrollbar-holder',
      scrollbarMargin: 0,
      scrollbarHeight: '10px',
      scrollbarBorderRadius: 1,
      scrollbarOpacity: 1
    });

  }); // end homeController

我尝试过类似的事情：

$('.category-holder:first').on('click', function (){
  $('#logo-hello').remove();
  $('#home-scrollbar-holder').css('bottom', '60px');
});

如何在返回主视图后删除logo hello的动画并修复滚动条位置？

Answer 1

设置一个全局变量，并在第一组homeController将变量设置为animations

之后检查true

e.g。

  var animationRun = false;
  // H O M E  C O N T R O L L E R
  app.controller('homeController', function ($scope){

    // align logo hello vertically through the middle
    $('#logo-hello img:first').load(function(){
      var logoBigHeight = $(this).height();
      $('#logo-hello').css({ 
        'height'    : logoBigHeight + 'px',
        'margin-top': '-' + (logoBigHeight / 2) + 'px'
      });
    });
    if(!animationRun){
    // appearance of logo hello, logo and menu
    $('#logo-hello img:first').animate({opacity: '1'}, 1000, function (){
      $('#logo-hello img:last').animate({opacity: '1'}, 1000, function (){
        $('#logo-hello').delay(1000).animate({opacity: '0'}, 1000, function (){ 
          $(this).remove();
          animationRun = true; // <<-- Here 
          $('#logo-holder').animate({top:'0'});
          $('#menu-wrap').animate({bottom:'0'});
          $('#home-scrollbar-holder').animate({bottom:'60px'});
        });
      });
    });
    }

    // slider settings
    $('.iosSlider').iosSlider({
      //autoSlide: true,
      desktopClickDrag: true,
      snapToChildren: true,
      scrollbarDrag: true,
      scrollbarContainer: '#home-scrollbar-holder',
      scrollbarMargin: 0,
      scrollbarHeight: '10px',
      scrollbarBorderRadius: 1,
      scrollbarOpacity: 1
    });

  }); // end homeController

返回主视图后，删除徽标问候语并修复滚动条位置

1 个答案: