Question

在这段代码中，我试图说出＆＃34;关于＆＃34;并最终工作＆＃34;投资组合＆＃34;一直向左移动，然后在单击我添加的x按钮时，或者在第二次单击该单词时一直向后移动。我得到了将单词一直向左移动的动画，但是当单击按钮或单词时，我无法获得动画返回工作的位置。任何帮助，将不胜感激。谢谢！（对不起，链接很长，不能在帖子中添加缩短的链接）

https://jsfiddle.net/ngtef82y/

<div id='bckDrp'>
  <div id='nav'>
    <img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var abtBack = function() {
  if ($('#abt').css('right') == 210) {
    $(this).animate({
      left: 210
    }, 450);
  }
}

var main = function() {
  //When any tab is clicked
  $('#hme, #abt, #prt').click(function() {
    $('#xBttn').toggle(300);
    $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1
      }, 300);
    })
  })

  //When Home tab is clicked
  $('#hme').click(function() {
    if ($('#abt, #prt').css('opacity') == 0) {
      $('#abt, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#abt, #prt').animate({
        opacity: 0
      }, 300);
    }
  });

  //When About tab is clicked
  $('#abt').click(function() {
    if ($('#hme, #prt').css('opacity') == 0) {
      $('#hme, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #prt').animate({
        opacity: 0
      }, 300);
    }
    if ($('#abt').css('right') == 210) {
      $(this).animate({
        left: 210
      }, 450);
    } else {
      $(this).animate({
        right: 210
      }, 450);
    }
  });
}

$(document).ready(main);

我决定退出css，检查jsfiddle是否有完整的代码。

Answer 1

我的建议是：

在附加事件之前保存about元素的左侧位置
检查左侧位置与已保存的位置
更改动画，以便向后或向前移动

var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
  if ($('#hme, #prt').css('opacity') == 0) {
    $('#hme, #prt').animate({
      opacity: 1
    }, 300);
  } else {
    $('#hme, #prt').animate({
      opacity: 0
    }, 300);
  }

  if ($('#abt').offset().left == (abtLeft - 210)) {
    $(this).animate({
      left: "+=210"
    }, 450);
  } else {
    $(this).animate({
      left: "-=210"
    }, 450);
  }
});
}

Your updated fiddle

Answer 2

将right: 0添加到#xBttn

的点击功能中的动画

//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
   $('#xBttn').toggle(300);
   $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1,
        right: 0
      }, 300);
   })
})

JQuery动画在第一次点击时移动而不是第二次

https://jsfiddle.net/ngtef82y/

2 个答案: