Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy how to combine fadeIn and fadeOut using hover (I am a beginner)

    Hi, this is my first time getting on this forum, hoping someone could solve my problem. First of all, here is my code:
    Code:
    <div id="wholeArea">
    	<h1 class="areaTitle"><i class="fab fa-laravel"></i> 建案地區</h1>
    	<p class="districtTitle"><a class="place" href="#">板橋<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    	<p class="districtTitle"><a class="place" href="#">中和<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    	<p class="districtTitle"><a class="place" href="#">五股<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    	<p class="districtTitle"><a class="place" href="#">土城<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    	<p class="districtTitle"><a class="place" href="#">木柵<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    	<p class="districtTitle"><a class="place" href="#">新莊<i id="arrow" class="fas fa-arrow-right"></i></a></p>
    </div>
    <div id="banqiaoHouses">
    	<img id="板橋立體" src="板橋立體.png">
    	<a href="#"><img class="pic1" src="百鈜立面圖.png"></a>
    	<a href="#"><img class="pic2" src="testing.png"></a>
    	<a href="#"><img class="pic3" src="testing1.png"></a>
    	<a href="#"><img class="pic4" src="testing2.png"></a>
    	<a id="pin1" href="#"><img class="國鼎圖釘" src="pin.png"></a>
    	<a id="pin2" href="#"><img class="公園大鎮圖釘" src="pin.png"></a>
    	<a id="pin3" href="#"><img class="民權建築圖釘" src="pin.png"></a>
    	<a id="pin4" href="#"><img class="公園世紀圖釘" src="pin.png"></a>
    </div>
    <div id="chunghoHouses">
    	<img id="中和立體" src="中和立體.png">
    	<a href="#"><img class="pic5" src="可以嗎.jpg"></a>
    	<a href="#"><img class="pic6" src="可以嗎1.jpg"></a>
    	<a href="#"><img class="pic7" src="可以嗎2.jpg"></a>
    	<a href="#"><img class="pic8" src="可以嗎3.jpg"></a>
    	<a id="pin5" href="#"><img class="測試圖釘1" src="pin.png"></a>
    	<a id="pin6" href="#"><img class="測試圖釘2" src="pin.png"></a>
    	<a id="pin7" href="#"><img class="測試圖釘3" src="pin.png"></a>
    	<a id="pin8" href="#"><img class="測試圖釘4" src="pin.png"></a>
    </div>
    What I wanted to do is to have all the pictures in the second div with an id="banqiaoHouses" to fadeOut and those in the third div with an id="chunghoHouses" to fadeIn when I move my mouseover 中和(chungho) in the first div, while to have all the pictures in the third div to fadeOut and those in the second div to fadeIn when I move my mouseout 中和(chungho) in the first div as well, which I think it's just the hover function.

    Sorry for all the mandarin if they are confusing.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,088
    Thanks
    6
    Thanked 1,333 Times in 1,302 Posts
    Hello, Mister Steven Weng, welcome to CodingForums.

    So, just to make sure I (and others) understand this correctly: You want the content of #banqiaoHouses to fade out and the content of #chunghoHouses to fade in if you move your mouse over the second link (中和) in #wholeArea, right? And if you move the mouse away from this link the opposite should happen (i. e. everything should fade back to the previous state)?

    And when you wrote “fadeIn” and “fadeOut”, is that an indication that you are using a JavaScript framework like jQuery and are asking for a solution with that, or is plain JS alright for you?

  3. #3
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mr.,

    Yes, it is exactly what I would like to do. I prefer to use jQuery but javascript is totally fine with me. Thank you for your reply and I really appreciate it!

  4. #4
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Hello, Mister Steven Weng, welcome to CodingForums.

    So, just to make sure I (and others) understand this correctly: You want the content of #banqiaoHouses to fade out and the content of #chunghoHouses to fade in if you move your mouse over the second link (中和) in #wholeArea, right? And if you move the mouse away from this link the opposite should happen (i. e. everything should fade back to the previous state)?

    And when you wrote “fadeIn” and “fadeOut”, is that an indication that you are using a JavaScript framework like jQuery and are asking for a solution with that, or is plain JS alright for you?

    Hi Mr.,

    Yes, it is exactly what I would like to do. I prefer to use jQuery but javascript is totally fine with me. Thank you for your reply and I really appreciate it!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •