我有这个完美工作的jquery脚本,可以在按下按钮时隐藏和显示内容。我想对此做进一步的工作并添加内容,使内容略有褪色,使其看起来更平滑。我还希望这样,如果我在任何按钮之外按一下,它将返回到默认内容。我尝试通过CSS添加一些过渡渐变,但没有使其工作。所有帮助表示赞赏。



$(document).ready(function(){
// Put all the images in a JavaScript array
var $imgs = $(".section-link");

// If you store your content in an array of objects, you can do this without creating
// more than one display div. You'll just get the content from the object in the
// array that has the same index as the image (within a different array)
var data = [
  {
    title: "Fair trade",
    text: "The Process from start is fair to all who are included in making our clothes."
  },
  {
    title: "Toxicfree",
    text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
  },
  {
    title: "Quality",
    text: "Our clothes have sustainable and high quality."
  },
  {
    title: "Organic",
    text: "All the materials and processes are fully organic and friendly to our planet."
  },
  {
    title: "Vegan",
    text: "We care about the animals, all clothes are crueltyfree and vegan."
  },
];

// Get reference to the output area
var $outputDiv = $(".section-display");

// Set a click event handler for each of the images
$imgs.on("click", function(){
  // Find the child elements within the output div that need updating and
  // extract the content from the array of objects that correspond
  // to the index of the image that was clicked.
  $(".title", $outputDiv).text(data[$(this).index()-1].title);
  $(".text", $outputDiv).text(data[$(this).index()-1].text);
});
});

.section-link {
width: 50px;
height: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="section-link fairtrade" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
  <img class="section-link toxicfree" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
  <img class="section-link quality" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
  <img class="section-link organic" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
  <img class="section-link vegan" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">

  <div class="section-display active">
    <h2 class="title">Default Title</h2>
    <h2 class="text">Default Content</h2>
  </div>

最佳答案

这就是您要寻找的东西,我用动画来实现我认为您想要的东西。

$(document).ready(function() {
  // Put all the images in a JavaScript array
  var $imgs = $(".section-link");

  // If you store your content in an array of objects, you can do this without creating
  // more than one display div. You'll just get the content from the object in the
  // array that has the same index as the image (within a different array)
  var data = [{
      title: "Fair trade",
      text: "The Process from start is fair to all who are included in making our clothes."
    },
    {
      title: "Toxicfree",
      text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
    },
    {
      title: "Quality",
      text: "Our clothes have sustainable and high quality."
    },
    {
      title: "Organic",
      text: "All the materials and processes are fully organic and friendly to our planet."
    },
    {
      title: "Vegan",
      text: "We care about the animals, all clothes are crueltyfree and vegan."
    },
  ];

  // Get reference to the output area
  var $outputDiv = $(".section-display");
  var defaulttext = $outputDiv.find(".text").text()
  var defaultTitle = $outputDiv.find(".title").text();


  // Set a click event handler for each of the images
  $imgs.on("click", function() {
    // Find the child elements within the output div that need updating and
    // extract the content from the array of objects that correspond
    // to the index of the image that was clicked.
    $This = $(this)
    $(".title", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title", $outputDiv).text(data[$This.index() - 1].title)
        .animate({
          opacity: 1
        });
    });
    $(".text", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text", $outputDiv).text(data[$This.index() - 1].text)
        .animate({
          opacity: 1
        });
    })
  });

  $(document).on("click", function(e) {
    if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
      $(".title", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".title", $outputDiv).text(defaultTitle)
          .animate({
            opacity: 1
          });
      });
      $(".text", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".text", $outputDiv).text(defaulttext)
          .animate({
            opacity: 1
          });
      })
    }
  })
});

.section-link {
  width: 50px;
  height: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="section-link fairtrade" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link toxicfree" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link quality" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link organic" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">
<img class="section-link vegan" src="https://vignette4.wikia.nocookie.net/uncyclopedia/images/e/e7/Big_GREEN_Button.png/revision/latest?cb=20110525071843" alt="">

<div class="section-display active">
  <h2 class="title">Default Title</h2>
  <h2 class="text">Default Content</h2>
</div>

关于javascript - 添加淡入淡出并在div外按,以重置为Jquery隐藏并显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47120553/

10-12 12:58
查看更多