Jquery показать/скрыть DIV по щелчку

Question

Привет Я имею заморачиваться с кодированием некоторые JQuery для замены одного DIV точно на месте другого на этой странице на моем сайте - http://www.heggie5.webspace.virginmedia.com/play.html

мне удалось успешно достичь ее с помощью CSS на hover, но это не совсем то, что я хочу - и я использовал переходы CSS в верхнем правом углу, чтобы добиться желаемого эффекта при нажатии, но нет возврата к исходному состоянию при выходе из div, и если он будет снова нажат, гладкий переход и его действительно неуклюжий. Мне жаль, если моя терминология запутывает btw!

Мой CSS для замены по наведению является

.sportintro { 
    float: left; 
    display: block; 
    position: relative; 
    height: 600px; 
    width: 560px; 
    } 
.sporthide { 
    float: left; 
    position: relative; 
    font-family: anticregular, sans-serif; 
    height: 592px; 
    width: 552px; 
    background-image: url(images/1sport.jpg); 
    margin-top: 4px; 
    margin-left: 4px; 
    -webkit-border-radius: 20px 0px 0px 0px; 
    -moz-border-radius: 20px 0px 0px 0px; 
    border-radius: 20px 0px 0px 0px; 
    } 

.sportshow { 
    float: left; 
    position: relative; 
    display: none; 
    height: 592px; 
    width: 552px; 
    background-image: url(images/2sport.jpg); 
    margin-top: 4px; 
    margin-left: 4px; 
    -webkit-border-radius: 20px 0px 0px 0px; 
    -moz-border-radius: 20px 0px 0px 0px; 
    border-radius: 20px 0px 0px 0px; 
    } 
.sportintro:hover>.sporthide { 
    display: none; 
    } 
.sportintro:hover>.sportshow { 
    display: block; 
} 

и для переходов

.runningintro { 
float: right; 
height: 200px; 
width: 310px; 
display: block; 
position: relative; 
} 

.runhide { 
float: left; 
position: absolute; 
font-family: anticregular, sans-serif; 
height: 196px; 
width: 306px; 
background-image: url(images/1jog.jpg); 
margin-top: 4px; 
-webkit-border-radius: 0px 20px 0px 0px; 
-moz-border-radius: 0px 20px 0px 0px; 
border-radius: 0px 20px 0px 0px; 
opacity: 1; 
z-index: 1; 
} 

.runshow { 
float: left; 
position: absolute; 
height: 196px; 
width: 306px; 
margin-top: 4px; 
-webkit-border-radius: 0px 20px 0px 0px; 
-moz-border-radius: 0px 20px 0px 0px; 
border-radius: 0px 20px 0px 0px; 
background-color: #00C; 
} 
input{display:none} 

input:checked + .runhide{ 
opacity: 0; 
cursor: pointer; 
-moz-transition: opacity 2s ease-in-out 1s; 
-webkit-transition: opacity 2s ease-in-out 1s; 
transition: opacity 2s ease-in-out 1s; 

} 
.runhide:target { 
opacity: 1; 
transition: opacity 2s ease-in-out 1s; 
} 

Я бы признателен за любую помощь относительно делая это проще с запросом - я до сих пор свежий в старой JQuery, и я ввязываюсь в сучки здесь!

Answer 1

Привет, вы можете работать с функцией, как это:

$(document).ready (function() { 
    $('#playwrapper > div').click (function() { 
     $('.playdescription').fadeOut(); 
     $(this).find('.playdescription').fadeIn(); 
    }) 
})