Smoothstate导致jQuery函数每个会话运行一次

时间:2017-04-03 08:11:22

标签: html css smoothstate.js

我的index.html页面有一个jquery函数,当页面准备就绪时运行。它抓取支持图像的文章,并在预定义区域内跟随鼠标光标。但是,在访问其他页面并返回index.html页面时,除非我执行页面刷新,否则该函数不再运行。我怎样才能解决这个问题?

编辑:看起来smoothstate函数导致此问题,因为一切正常,因为我删除(smoothstate)[https://github.com/miguel-perez/smoothState.js]。 的 HTML

<div id="main">

<p>Hover over titles</p>

<div class="content1">
  <a><h2>Title 1 goes here </h2></a>
  <img src="http://lorempixel.com/400/400/sports" alt="Image"/>
</div>

<div class="content2">
  <a><h2>Title 2 goes here </h2></a>
  <img src="http://lorempixel.com/300/300/people" alt="Image"/>
</div>

<div class="content2">
  <a><h2>Title 3 goes here </h2></a>
  <img src="http://lorempixel.com/200/300/technology" alt="Image"/>
</div>

</div>

的jQuery

$(document).ready(function(){
    $('h2').on('mouseenter mousemove', function(evt){
        $(this).siblings('img').css({left: evt.pageX+30, top: evt.pageY-15}).show();
        $(this).on('mouseleave', function(){
            $(this).siblings('img').hide();
        });
    });
});

// Smoothstate

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        forms: 'form',
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 1000,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);

          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

1 个答案:

答案 0 :(得分:0)

请参考以下答案,与您想要做的事情密切相关:browser event for window.focus()