как заменить эффект под кнопкой? - Страница 2

Страница 2 из 2 « 1 2
Модератор форума: JonMagon

как заменить эффект под кнопкой? (Помогите осилить пожалуйста =))

как заменить эффект под кнопкой?

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 16 | 00:20:03 09 Июн 2014

ПКМ работает с SHIFTOM
Видел конечно - вообще 0 эффекта - окно не появляется совсем тогда! Уже весь код который ты дал перепробовал и так и сяк - чувствую скоро стану экспертом по КСС с этим окном!!!!!!!!! mobile

код еще переработал - вот такой короткий вариант работает - появляется окно как нужно
но блин.. почему же оно появляется когда наводишь на его площадь ??? посмотри на сайте
ни display:block ни visibility: hidden не решают проблему
жаль все рушить и пользовать скрипт - код то хороший.. никаких библиотек вообще не требует а выглядит эффект окна точно как на query

#buttontopic{top:286px;left:5px;}
#buttontopic:hover #abc{
opacity:1;left:84px;
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
#abc{top:6%;opacity:0;}

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал GEMMY - Понедельник, 09 Июн 2014, 00:43:06

Nexxus

Сообщений: 289

Репутация: 66

Сообщение # 17 | 12:36:09 10 Июн 2014

Код

$("#buttontopic").mouseover(function(){
$("#abc",this).stop(true).fadeIn(300);
}).mouseout(function(){
$("#abc",this).stop(true).fadeOut(300);
});

Попробуй так)

Добавлено (10 Июн 2014, 12:36:09)
---------------------------------------------
Можно еще так)

Код

#button{
    bottom: 9%;
    right: 0.1%;
}
#content{
    top:66%;
    right:-10%;
    display:none;
    opacity:0;
    -webkit-transition:opacity 0.7s ease;
    -moz-transition:opacity 0.7s ease;
    -o-transition:opacity 0.7s ease;
    transition:opacity 0.7s ease;
}
#button > a:hover #content{
    display:block;
    opacity:1;
    right:10%;
    -webkit-transition:opacity 0.7s ease;
    -moz-transition:opacity 0.7s ease;
    -o-transition:opacity 0.7s ease;
    transition:opacity 0.7s ease;
}

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 18 | 17:37:03 11 Июн 2014

Цитата Nexxus (

)

$("#buttontopic").mouseover(function(){ $("#abc",this).stop(true).fadeIn(300);
}).mouseout(function(){
$("#abc",this).stop(true).fadeOut(300);
});

а вот с этим - какой КСС использовать?

если оставляю такой -
#abc{top:6%;left:0.1%}
окно не появляется вообще

WWW.DOGICA.COM / WWW.DOGICA.ORG

Nexxus

Сообщений: 289

Репутация: 66

Сообщение # 19 | 17:43:43 11 Июн 2014

Цитата Dogica (

)

а вот с этим - какой КСС использовать?

Код

#button{
  bottom: 9%;
  right: 0.1%;
}
#content{
  top:66%;
  right:10%;
  display:none;
}

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 20 | 19:07:15 11 Июн 2014

не эффекта 0
ну ладно, закрыли тему.. видать судьба говорит - забей на окна =)
спасибо ! (репу добавлю через 3 дня)
добавил меркури студио на страничку кредитов.. покажу как будет полностью готова
=)

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Среда, 11 Июн 2014, 19:07:54

Nexxus

Сообщений: 289

Репутация: 66

Сообщение # 21 | 19:47:33 11 Июн 2014

Dogica, я тут набросал кода немного, проверил - все работает.

Код

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jq.js"></script>
<style>
.fixed_menu_elem{
  position:fixed;
  top:50px;
  left:50px;
}

.fixed_menu_elem > span.container{
  position:fixed;
  top:50px;
  left:150px;
  display:none;
  width:400px;
  height:600px;
  background:#EEE;
  z-index:1;
}
</style>
<script>
$(document).ready(function(){
  $(".fixed_menu_elem > a").mouseover(function(){
   $(this).parent().children(".container").stop(true).fadeIn(300);
  }).mouseout(function(){
   $(this).parent().children(".container").stop(true).fadeOut(300);
  });
});
</script>
</head>
<body>
<span class="fixed_menu_elem">
<a href="">Hover me</a>
<span class="container">yasdgijsan ;akjhsdou has;d kjbasidf vbas nl;kasjb jhabs d</span>
</span>
</body>
</html>

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 22 | 21:19:25 11 Июн 2014

ниче себе немного =)_
пошел добивать кису! отпишусь скоро

Добавлено (11 Июн 2014, 21:19:25)
---------------------------------------------
этот код классно работает но есть вопросы:

1) почему он перестает работать при переходе на другой таб в мозиле и возвращении на эту страничку, попробуйте перейти на другой сайт (не закрывая эту страничку)
2) не успеваю нажать на ссылку внутри контента - окно исчезает
неправильное условие в функции да? Надо чтобы окно оставалось открытым пока курсор находится на территории окна Или на территории кнопы хувер.. щас тока пока на кнопе.

http://www.dogica.com/nexxus.html

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Среда, 11 Июн 2014, 21:29:28

Nexxus

Сообщений: 289

Репутация: 66

Сообщение # 23 | 22:21:02 13 Июн 2014

Dogica,

Код

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jq.js"></script>
<style>
.fixed_menu_elem{
   position:fixed;
   top:50px;
   left:50px;
   z-index:2;
}

.fixed_menu_elem > span.container{
   position:fixed;
   top:50px;
   left:120px;
   display:none;
   width:400px;
   height:600px;
   background:#EEE;
   z-index:1;
}
</style>
<script>
$(document).ready(function(){
  $(".fixed_menu_elem").mouseover(function(){
   $(".container",this).stop(true).css("display","block").fadeTo(300,1);
  }).mouseout(function(){
   $(".container",this).stop(true).delay(300).css("opacity","1").fadeTo(300,0,function(){
    $(this).hide();
   });
  });
});
</script>
</head>
<body>
<span class="fixed_menu_elem">
<a href="">Hover me</a>
<span class="container">yasdgijsan ;akjhsdou has;d kjbasidf vbas nl;kasjb jhabs d</span>
</span>
</body>
</html>

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 24 | 20:20:58 16 Июн 2014

супер!
спасибо
=)

Добавлено (16 Июн 2014, 20:20:58)
---------------------------------------------
NEXXUS - даже самому интересно уже
что же ее заставляет так появлятся и исчезать автоматически на основной
http://www.dogica.com

в примере этого не происходит
http://www.dogica.com/nexxus.html

функцию не менял.

WWW.DOGICA.COM / WWW.DOGICA.ORG

как заменить эффект под кнопкой? (Помогите осилить пожалуйста =))

Страница 2 из 2
«
1
2