Question

长时间潜伏......第一篇文章。

我希望制作一个在悬停时动画的播放/暂停按钮，而且这种变化来自于玩游戏＆＃39;暂停＆＃39;点击按钮。（我用它来触发音频文件）

我的工作是堆叠两个不同颜色的图像，并在鼠标悬停时在CSS（不透明度）上进行过渡。

我一直在努力改变点击javascript / jquery上的src，我设法开始工作（播放按钮变成暂停按钮，css过渡仍然有效）但我不知道如何制作条件if /然后声明让它恢复到原来的“玩”状态。下一次点击按钮图片。

我已经尝试了很多事情，觉得我很接近，但由于我对javascript / jquery几乎没有经验，我不知道如何继续。

我希望我的问题在某种程度上是可以理解的，我非常感谢能得到的任何帮助！

＆＃13;

$("document").ready(function() {
  $("#playpause").click(function() {
    $("#top").attr("src", "//placehold.it/100?text=play");
    $("#bottom").attr("src", "//placehold.it/100?text=pause");
  });
});

＆＃13;

#playpause {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 5px 10px 0 0;
}

#playpause img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#playpause img.top:hover {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="playpause" class="one column">
  <a id="flytonight" href="#">

    <img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
    <img class="top" id="top" src="//placehold.it/100?text=pause" />

  </a>
</div>

＆＃13;

Answer 1

对不起，我对你的问题没有给予足够的重视，这将是一个解决方案：

var playToggle = false;
    $("#playpause").click(function() {
            if (playToggle === true){
               $("#top").attr("src", "//placehold.it/100?text=play");
               $("#bottom").attr("src", "//placehold.it/100?text=pause");
            else{
               $("#bottom").attr("src", "//placehold.it/100?text=play");
               $("#top").attr("src", "//placehold.it/100?text=pause");
            }
        playToggle = !playToggle;
      });

Answer 2

您只需检查每个src中的当前click属性，然后相应地进行更改。您将始终在两个src值之间切换。

$("document").ready(function() {
  $("#playpause img").click(function() {
    if ($(this).attr("src") === "//placehold.it/100?text=play")
      $(this).attr("src", "//placehold.it/100?text=pause");
    else if ($(this).attr("src") === "//placehold.it/100?text=pause")
      $(this).attr("src", "//placehold.it/100?text=play");
  });
});

<强>演示：

$("document").ready(function() {
  $("#playpause img").click(function() {
    if ($(this).attr("src") === "//placehold.it/100?text=play")
      $(this).attr("src", "//placehold.it/100?text=pause");
    else if ($(this).attr("src") === "//placehold.it/100?text=pause")
      $(this).attr("src", "//placehold.it/100?text=play");
  });
});

#playpause {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 5px 10px 0 0;
}

#playpause img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="playpause" class="one column">
  <a id="flytonight" href="#">
    <img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
  </a>
</div>

单击时jquery更改图像src，并在第二次单击时恢复为原始图像

2 个答案: