javascript - 如何在单击时淡出 1 张图片并自动淡入彼此靠近的 4 张图片？-6ren

javascript - 如何在单击时淡出 1 张图片并自动淡入彼此靠近的 4 张图片？

转载作者：行者123 更新时间：2023-11-28 19:28:46

我想单击已有的图片，然后再淡入 4 张图片。像过滤一样的东西。例如，我正在尝试选择混凝土作为主要类别，然后我想再接收 4 张带有用户想要选择的公斤的图片淡入。

$(document).ready(function() {

  $(".pulse-button").click(function() {

    $(this).addClass('fadeOut');

  });

});

//END BUTTON FADEOUT

$('button').on('click', function() {

  $(this).prop('disabled', true);

}); //END BUTTON DISABLE


  //START OF PLASTER-BOARD FADE-IN FUNCTIONALITY

  $(".pulse-button").click(function() {

    $("#plasterBoard").fadeToggle("slow", "linear", "complete");

  });

//END OF PLASTER-BOARD FADE-IN FUNCTIONALITY

/////////////////////////////////////////////////////////////////////

//START OF BRICK FADE-IN FUNCTIONALITY

$(".pulse-button").click(function() {

  $("#brick").fadeToggle("slow", "linear", "complete");

});

//END OF BRICK FADE-IN FUNCTIONALITY

/////////////////////////////////////////////////////////////////////

//START OF CONCRETE STONE FADE-IN FUNCTIONALITY

$(".pulse-button").click(function() {

  $("#concreteStone").fadeToggle("slow", "linear", "complete");

});

//END OF CONCRETE STONE FADE-IN FUNCTIONALITY

/////////////////////////////////////////////////////////////////////

//START OF CONCRETE STONE FADE-IN FUNCTIONALITY

$(".pulse-button").click(function() {

  $("#aerateConcrete").fadeToggle("slow", "linear", "complete");

});

//END OF CONCRETE STONE FADE-IN FUNCTIONALITY

/////////////////////////////////////////////////////////////////////


$("#plasterBoard").click(function() {

  $("#plasterBoard").fadeOut(300);
  $("#kilosIcon").fadeIn(300);
  $("#KILOIcon").fadeIn(300);
});

$("#brick").click(function() {

  $("#brick").fadeOut(300);

  $("#kilosIcon").fadeIn(300);

});

$("#concreteStone").click(function() {

  $("#concreteStone").fadeOut(300);

  $("#kilosIcon").fadeIn(300);

});

$("#aerateConcrete").click(function() {

  $("#aerateConcrete").fadeOut(300);

  $("#kilosIcon").fadeIn(300);

});

* {
  margin: 0;
  padding: 0;
}

.fadeOut {
  opacity: 0;
}

.pulse-button {
  transition: all .5s linear;
  position: fixed;
  width: 200px;
  height: 200px;
  border: none;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 50%;
  background-color: #e84c3d;
  color: white;
  background-size: auto;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  line-height: 40px;
  margin-top: -50px;
  margin-left: -50px;
}

.pulse-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}


/* BACKGROUND */

.hero-image {
  background: url(imgs/sajad-mohammadi-1159479-unsplash.jpg) no-repeat center;
  background-size: cover;
  height: 100%;
  !important position: relative;
}


/*----------*/

.column {
  float: left;
  width: 25%;
  padding: 5px;
  margin-top: 470;
  flex: 25%;
  padding: 5px;
}

.row {
  display: flex;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

#kilosIcon {
  margin-top: 470px;
}

.imgBorder {
  padding: 15px 205px 0 205px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  -moz-box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type=”text/javascript” src=https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<!-- CC -->

<!-- END OF STYLE -->

<!-- END OF HEAD -->

<!-- ///////////////////////////////////////////////////////////////////// BODY  ///////////////////////////////////////////////////////////////////// -->

<body>
  <!-- START of BODY -->

  <div>
    <!-- START BUTTON -->

    <button id="pulseButton" class="pulse-button" class="container" style="align-content: center; outline: none;">
    
                <h1>START</h1>
    
                <!-- START BUTTON FADEOUT -->
    
            
    
                <!-- ------------------------END OF LAYER 1 FADE IN PICTURES FUNTIONALITIES ---------------------------- -->
    
            </button>
    <!-- END OF BUTTON FUNCTIONALITIES -->

  </div>
  <!-- END START BUTTON -->

  <!-- -------------------------------------------------------------------------------------  -->

  <!-- -------------------------------------------------------------------------------------  -->

  <!-- -------------------------------------------------------------------------------------  -->

  <div class="hero-image">
    <!-- CONTAINER OF 1st LAYER PICTURES DIV -->

    <img id="kilosIcon" src="imgs/10kilo.png" alt="aerateConcrete" class="imgBorder" style="width:25%; display: none; ">

    <!-- Small IMAGES from Filters -->

    <div class="row">

      <div class="column">
        <!-- PICTURE 1 FADE OUT -->

        <img id="plasterBoard" src="imgs/Plasterboard.jpeg" alt="plasterboard" class="imgBorder" style="width:100%; display: none;">

        <!-- Fading in IMAGES on CLICK OF ANOTHER IMAGE -->


      </div>

      <div class="column">
        <!-- PICTURE 2 FADE OUT -->

        <img id="brick" src="imgs/brick.jpeg" alt="brick" class="imgBorder" style="width:100%; display: none;">

      </div>

      <div class="column">
        <!-- PICTURE 3 FADE OUT -->

        <img id="concreteStone" src="imgs/concrete(stone).jpeg" alt="concreteStone" class="imgBorder" style="width:100%; display: none;">

        <!-- FADING IN IMAGES ON CLICK OF ANOTHER IMAGE -->

      </div>

      <div class="column">
        <!-- PICTURE 4 FADE OUT -->

        <img id="aerateConcrete" src="imgs/aeratedConcrete.jpg" alt="aerateConcrete" class="imgBorder" style="width:50%; display: none;">

      </div>

    </div>
    <!-- END OF PICTURE ROW AFTER CLICK -->

  </div>
  <!-- END CONTAINER OF 1st LAYER PICTURES DIV -->

  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->

  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->
  <!-- START OF 3RD LAYER FOR KILO SPECIFICATION PICTURES -->

</body>

点击图片淡出，点击后自动淡入4张图片

最佳答案

您的代码存在多个问题。尝试将您的工作分割为多个步骤，因为这会更容易让您进步，也让我们更容易帮助您。

这是我试图让它回到正确方向的尝试:

//with proper html class and ids, and multiple instructions in one function, you can greatly reduce the size of your js
$(document).ready(function() {
  
  $(".pulse-button").click(function() {
    //BUTTON FADEOUT AND DISABLE
    $(this).addClass('fadeOut');
    $(this).prop('disabled', true);
    //SHOW MAIN CATEGORIE
    $("#mainCategorie").fadeToggle("slow", "linear", "complete");

  });
  
  $("#mainCategorie img").click(function() {
    //HIDE MAIN CATEGORIE
    //$("#mainCategorie").fadeOut(300);
    //HIDE ALL IMAGES BUT NOT THE ONE CLICKED
    //$("#mainCategorie img").not(this).fadeOut(300);
    //SHOW KILO SPECIFICATION
    $("#kiloSpecification").fadeIn(300);
  });

});

/*as for the css simpler is better, first make something working like you want and only after that make it good-looking.*/
/*I removed what was in the way. I'm not using bootstrap so I may have missed some good practice there.*/

* {
  margin: 0;
  padding: 0;
}

.fadeOut {
  opacity: 0;
}

.pulse-button {
  transition: all .5s linear;
  position: fixed;
  width: 200px;
  height: 200px;
  border: none;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 50%;
  background-color: #e84c3d;
  color: white;
  background-size: auto;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  line-height: 40px;
  margin-top: -50px;
  margin-left: -50px;
}

.pulse-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}


/* BACKGROUND */

.hero-image {
  background: url(imgs/sajad-mohammadi-1159479-unsplash.jpg) no-repeat center;
  background-size: cover;
  !important position: relative;
}


/*----------*/

.column {
  width: 25%;
  display:inline-block;
  text-align:center;
}
.column img{
  display:inline-block;
  width:90%;
  height:50px;
}
/*if you want some img to have specific proportions, add them here like so :
#plasterBoard{
  width:50px;
  height:50px;
}
*/


@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

.imgBorder {
  background-color: white;
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  -moz-box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

<head>
  <!--try to only include scripts you need, including multiple jquery instance could create bugs-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <!--your style and js goes here-->

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <!--in the html, use div to group content as you need it : in your case you need at least a div for the start, a div for the "main category", and a div for the "kilo selection"-->
  <!-- START BUTTON -->
  <div>
    <button id="pulseButton" class="pulse-button" class="container" style="align-content: center; outline: none;">
      <h1>START</h1>
    </button>
  </div>
  <!-- END START BUTTON -->

  <!-- MAIN CATEGORY SELECTION -->
  <div id="mainCategorie" style="display:none;" class="hero-image">
    <div class="row">
    
      <div class="column">
        <img id="plasterBoard" src="imgs/Plasterboard.jpeg" alt="plasterboard" class="imgBorder">
      </div>

      <div class="column">
        <img id="brick" src="imgs/brick.jpeg" alt="brick" class="imgBorder">
      </div>

      <div class="column">
        <img id="concreteStone" src="imgs/concrete(stone).jpeg" alt="concreteStone" class="imgBorder">
      </div>

      <div class="column">
        <img id="aerateConcrete" src="imgs/aeratedConcrete.jpg" alt="aerateConcrete" class="imgBorder">
      </div>

    </div>
  </div>
  <!-- END MAIN CATEGORY SELECTION -->

  <!-- KILO SPECIFICATION SELECTION -->
  <div id="kiloSpecification" style="display:none;" class="hero-image">
    <div class="row">
    
      <div class="column">
        <img id="kilosIcon10" src="imgs/10kilo.png" alt="10kilo" class="imgBorder">
      </div>

      <div class="column">
        <img id="kilosIcon20" src="imgs/20kilo.png" alt="20kilo" class="imgBorder">
      </div>

      <div class="column">
        <img id="kilosIcon30" src="imgs/30kilo.png" alt="30kilo" class="imgBorder">
      </div>

      <div class="column">
        <img id="kilosIcon40" src="imgs/40kilo.png" alt="40kilo" class="imgBorder">
      </div>

    </div>
  </div>

</body>

有很多话要说，但我试图将其保持在最低限度，并在代码中显示其余部分。如果您需要我扩展某些内容，请不要犹豫，但请再次尝试逐步进行:您需要学习很多东西，并且您已经在 SO 上回答了很多问题。

作为一个好的经验法则，尝试从 html(“好的，我想要我的页面中有 4 行，每行 4 张图片”)开始，然后是基本的 css(“我希望我的图片并排放置”)，然后js(“现在，我希望我的图像仅在单击开始时出现”)并且仅在高级 css 之后(“我想要闪烁和旋转图像!”)。

祝你好运!

关于javascript - 如何在单击时淡出 1 张图片并自动淡入彼此靠近的 4 张图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55532194/

文章推荐： python - pip force reinstall in requirements.txt

文章推荐： python - 为什么我在 python 中看到时区异常

javascript - 获取数据:图片/png；base64，{{图片}} net::ERR_INVALID_URL
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架)，我使用了这段代码: $http.post(link, { token: token,
javascript - IOS设备隐藏 "Play Store"图片，Android设备隐藏 "App Store"图片
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上，我希望它只显示“App Store”图标，但在 Android 上隐藏它。如果它们在 Android 设备上，则只有“Play Store
JavaScript 图片
如何在同一页面上多次显示同一张图片？ function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西，
css 图片
您好，我有一个 1px 的 png 文件，我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
image - PrestaShop 图片
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时，我上传了一个PNG格式的图片，但是当它在客户端显示时，图片是JPG格式的。如何保留图片扩展名？最佳答案在后台
r - 发送表达式给网站返回动态结果(图片)
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式打开显示该表达式的站点例如，让我们使用正则表达式:"\\s*foo[
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
javascript - 使用XPCOM上传网页文件/图片
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
java - 如何根据javafx中的复选框选择生成按钮(图片)
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮？我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。我首先
java - 开发支持多语言的java客户端时优化jar文件大小(图片)
我正在开发Java客户端，它应该支持多种语言。为了翻译文本，我使用 Java ResourceBoundle，它工作正常。现在问题出在图像上。客户端应加载大约 50 张图像，这些图像是棋盘游戏的特定
jquery 褪色图片
我对 jQuery 还很陌生，但我正在寻找一个简单的脚本，通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png，因此我尝试过的许多 slider 都不起作用。有什么想法吗？
jQuery:选择器问题(图片)
我有一个 HTML 文档，其中包含本地文件的图像，例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。我已经放置了physicsBody节点“barn ”，直接位于 non-physicsBody 之上节点“mound”没有任何问题。
c# - 获取图像的特定部分(图片)
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。最佳答案这将加载原始版本并创建
Javascript 图片 uploader
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件？解决方案是否跨域兼容？最佳答案要实现具有裁剪功能的图片上传小部件，您必须: 将图像
来自图库方向的 Android 图片
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
java - 一个国家的可点击浮雕(图片)
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此，当用户单击特定区域时，应打开特定屏幕。区域也应该用线分隔，以便用户可以看到区域的开始/结束位置。这是一个国家的例子
php - 在php中上传文件时发生错误(图片)
首先我想对这个问题表示歉意，因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。所以基本上我正在尝试上传图像文件，当我提交它时，会
MySQL:查询结果[图片]
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录，但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在单击时淡出 1 张图片并自动淡入彼此靠近的 4 张图片？