Javascript / jquery ul / li анимация в документе php?
Я только начал делать несколько php и следовал одному руководству на странице udemy о том, как создать простой php сайт. Теперь я хочу анимировать элементы границы панели навигации с помощью Js / Jquery. Но это не похоже на работу для меня.
Я использовал php include для включения navbar в заголовок, а затем заголовок в основные файлы php.
Это мой файл navbar.
<ul>
<li id="indexx"><a href="index.php">Home</a></li>
<li id="teamm"><a href="team.php">Team</a></li>
<li id="menuu"><a href="menu.php">Menu</a></li>
<li id="contactt"><a href="contact.php">Contact</a></li>
</ul>
И я включил это в мои заголовки div id = «nav», как это.
<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="index.php" title="Return to home"></a>
<img src="img/banner.png" alt="nema slike jbg." />
</div>
<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>
<div class="content">
У моего сайта есть основные php-файлы, такие как указатель, меню, команда и т. Д., Которые содержат заголовок.
Итак, как мне анимировать эти элементы панели навигации, чтобы их радиус границы менялся при вводе мыши?
Поскольку панель навигации включена в заголовок и заголовок в каждом главном файле php, я попытался добавить исходный файл jquery и js, в котором мой код для «animation» находится в моем header.php, но, похоже, он не работает.
Может кто-нибудь дать мне несколько советов, как мне это сделать?
Кстати, это код для анимации:
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
СПАСИБО всем, мне удалось заставить его работать. Но у меня все еще есть проблема.
Вот как выглядят мои ul и li:
Есть ли способ анимировать радиус границы li (дома, команды, меню, контакта), поскольку они являются элементом li? Я добавил свойства ширины и высоты.
Но когда я делаю курсор мыши, я получаю эти изменения, но радиус границы не меняется, я имею в виду, что прямоугольники все еще не «изогнуты»
. Я заранее прошу прощения за то, что, возможно, задаю глупые вопросы и за плохое объяснение, но я только начинающий в этом, так как я сказал, что следовал руководству о том, как создать эту веб-страницу.
Решение
Я предлагаю написать свой встроенный скрипт перед закрытием тега body </body>,
Также предлагаем вам одно усовершенствование в селекторе jQuery. если вы хотите, чтобы эффект во всех <li> затем не используйте идентификатор.
ваш nav.php
<ul id="my_navbar">
<li ><a href="index.php">Home</a></li>
<li ><a href="team.php">Team</a></li>
<li ><a href="menu.php">Menu</a></li>
<li ><a href="contact.php">Contact</a></li>
</ul>
Ваш файл index.php
<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="index.php" title="Return to home"></a>
<img src="img/banner.png" alt="nema slike jbg." />
</div>
<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>
<div class="content">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#my_navbar li').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>
</body>
</html>
Другие решения
помните, что php — это серверный язык, который помогает вам создавать динамический HTML. поэтому убедитесь, что вы предварительно включили весь JavaScript, который вам нужен для всего, что происходит на стороне клиента. см. мой пример ниже, я предположил, что ваш селектор jquery правильный.
<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>
</head>